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 🤯