Each browser has an HTML / CSS rendering engine. They all strive to make the page more quickly loaded and rendered. Usually the process is so fast that one can not notice the phases in which this occurs (see below).
For example, Chrome and Opera have taken advantage of Webkit and use the Blink engine. Safari uses Webkit , Internet Explorer uses the Trident , Firefox uses the Gecko .
These render engines have CSS interpreters and DOM parsers and follow the W3C pattern templates:
These models are interconnected and independent, but separately
are CSS rendering patterns.
Browsers download the HTML and CSS from the server and first parse 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 a render tree . This tree represents the visual effects with which the elements will be displayed.
Phase 2:
After the processes above, both trees go through the layout process, where the browser places each node (element) in the document area. This is called by the W3C positioning scheme , which instructs the browser where and how each element must be inserted, according to 3 types: normal flow, floaters and absolute position.
Phase 3:
The final phase called painting . It is the gradual process where the rendering engine runs through the rendering tree applying all the visual effects, such as sizes, colors etc.
This phase can be observed when opening a page on a slower connection, and you can see the visual styles being applied as the page is rendered.
Regarding the example analysis:
.classe-A .class-B #id-A span p {
color: red;
}
The reading order from right to left (from child to parent) or from left to right (from parent to child) does not make much difference , since you get the same result, however I find it more reasonable and, in my opinion, easier to read the left to right , since CSS is interpreted from top to bottom, from father to son.
Search and Interpretation Source .
