How does the browser read and interpret css?

Asked

Viewed 563 times

3

I’m starting in this world of the Front and I read that the browser reads and interprets the css right-to-left.

But how he reads and interprets when there is the cascade of classes, as in this example:

.classe-A .class-B #id-A span p { 
 color: red;
}

From what I understand, he will read the P that is in SPAN that is in #id-a that is in class-A and only then when he reaches the end in class-B he applies css.

That’s right ?

How is this read, interpreted by the browser and applied to html? My doubt would be about what happens behind the backgrounds of the browser, because I read somewhere that it will read all the P and assemble an array-like with this, and only then it will stylize.

html css front-end

  • I do not understand the doubt... The rule you gave of example only applies yes to p that are within all that, in that order. That is the doubt??

  • 2

    I recommend reading the article How Browsers Work. It explains how browsers interpret HTML, CSS and JS. If someone wants to read and take as a basis...

  • @bfavaretto my doubt would be a little more behind the backgrounds of the browser, because I read somewhere that it will read all P and assemble an array-like with this and only then it will stylize, but as n find this more, n know if I can trust my memoria rsrs

  • @Valdeirpsr I’ll read the article.

  • 1

    Then read the article @Valdeirpsr indicated. Just never forget that there may be variation between browsers regarding implementation details. CSS is a specification, if the browser can generate the expected result for what the language determines, it’s all right. No imposition on implementation details.

  • Explaining a little better what I said: in p { color: red; }, CSS determines the text of all p must be red (unless another rule overwrites this). This ends the CSS function. How to make these paragraphs turn red and how to implement page rendering is the responsibility of the browser, and CSS does not get into this. Soon, again, each browser can do as it wants (although in practice they end up doing similar).

  • Search for "css specificity" and "css selector types" with this you will better understand how the class hierarchy works etc etc

  • In a waterfall (waterfall) the waters do not rise, but descend. Same way the CSS, from top to bottom, so much so that you can’t select a parent element from a child. Therefore, I find it more reasonable to say that it is read from left to right: .classe-A who has one (or more) child .class-B who has a son #id-A who owns a span son who in turn owns a p son.

  • 1

    Each browser implements in its own way, the only thing that matters is to obey the specifications so that the result is predictable. The essential has already been answered here in the same Sopt. Ex: What is the difference between the selectors "element element" and "element>element"?; Which CSS selector has priority; When using div+selector in CSS; What is the definition of each combination in CSS selectors

Show 4 more comments

1 answer

4


Each browser has an HTML/CSS parsing and rendering engine. They all strive to make the page faster loaded and rendered. Usually the process is so fast that you can’t notice the phases in which it occurs (see below).

For example, Chrome and Opera took advantage of Webkit and use the engine called Blink. Safari uses the Webkit, Internet Explorer uses the Trident, Firefox uses the Gecko.

These rendering engines feature CSS interpreters and DOM parsers and follow the W3C standard templates:

Those models shall be interconnected and independent, but not separately are CSS rendering patterns.

Browsers download HTML and CSS from the server and first analyze and add HTML tags to the DOM nodes, creating a tree called content tree.

Phase 1:

While HTML is parsed, the rendering engine creates a new tree called render tree. This tree represents the visual effects with which the elements will be displayed.

Phase 2:

After the above processes, both trees go through the process of layout, where the browser places in the document area each node (element). This is called by W3C’s positioning scheme, which instructs the browser where and how each element should be inserted, according to 3 types: normal flow, floaters and absolute position.

Phase 3:

The final phase called Painting (free translation, painting). It is the gradual process where the rendering engine runs through the rendering tree applying all visual effects such as sizes, colors etc.

This phase can be observed when you open a page on a slower connection, and you can see the visual styles being applied as the page is rendered.

Regarding the analysis of the example:

.classe-A .class-B #id-A span p { 
 color: red;
}

The order of reading, from right to left (from son to father) or left to right (from father to son) in my view it does not make much difference, since it comes to the same result, however I find it more reasonable and, in my opinion, easier, the reading of the left to right, since CSS is interpreted from top to bottom, from father to son.

Source of research and interpretation.

Browser other questions tagged html css front-end

You are not signed in. Login or sign up in order to post.