CSS in the browser

Individual Style sheets
<style> tags
Parsing and tokenization
Breaking down into a clearer data structure (Shorthand properties become longhands)
DOM tree construction
style attributes
Style Computation - All values are standardized to computed values of either auto, a percentage, or a pixel value.
Specificity scores and cascade are defined
User: The styles set globally by the user in their browser (like a different font-size) Author: Styles present in the document or external stylesheet User-Agent: The browser's default values.
Declarations from all origins are sorted in accordance with specification.
The CSS Object Model is updated with the computed styles of the cascaded values.
When running, getComputedStyles() for example, the same process above is run
'auto' values set in the computing phase are resolved into actual values.
The layout process is spun up. The browser goes down the DOM tree and generates a box with the margin, padding, border, and content box for each node
The visual styles such as border and backgrounds are applied during the Painting phase The order is background, order, and then content.
At the end of the process. Every layout element, even text, is then converted into a bitmap image 🤯
The painting phase also defines he stacking context (z-index) which is essentially the order in which the elements are painted.
Next is Compositon. The compositor’s job is to create a layer, or layers, and render the bitmap(s) to the screen for the end user to see.
The compositor is on a separate thread and can be handled multiple bitmaps at the end of the painting process from which it can use to do animations and transitions.

CSS in the browser

Individual Style sheets
<style> tags
Parsing and tokenization
Breaking down into a clearer data structure (Shorthand properties become longhands)
DOM tree construction
style attributes
Style Computation - All values are standardized to computed values of either auto, a percentage, or a pixel value.
Specificity scores and cascade are defined
User: The styles set globally by the user in their browser (like a different font-size) Author: Styles present in the document or external stylesheet User-Agent: The browser's default values.
Declarations from all origins are sorted in accordance with specification.
The CSS Object Model is updated with the computed styles of the cascaded values.
When running, getComputedStyles() for example, the same process above is run
'auto' values set in the computing phase are resolved into actual values.
The layout process is spun up. The browser goes down the DOM tree and generates a box with the margin, padding, border, and content box for each node
The visual styles such as border and backgrounds are applied during the Painting phase The order is background, order, and then content.
At the end of the process. Every layout element, even text, is then converted into a bitmap image 🤯
The painting phase also defines he stacking context (z-index) which is essentially the order in which the elements are painted.
Next is Compositon. The compositor’s job is to create a layer, or layers, and render the bitmap(s) to the screen for the end user to see.
The compositor is on a separate thread and can be handled multiple bitmaps at the end of the painting process from which it can use to do animations and transitions.