How the Browser Builds CSSOM: A step-by-step explanation

You’ve probably used CSS to style your websites, but have you heard of CSSOM? Let’s dive into how CSS turns into something even more powerful.

CSSOM, or the CSS Object Model, is like a map for your browser. It takes all the CSS styles you write and transforms them into a format that the browser can work with efficiently. This process is essential because while CSS is great for defining styles, the browser needs a more structured way to apply these styles to the webpage.

This transformation process is described in alonside the CSS syntax in the CSS Syntax Module Level 3 document. Of course, like any specification it is lengthy and quite a boring read, so I compressed informaton found there to make it easier to digest.

Step 1 - Loading the Stylesheets

How CSS is Introduced

CSS can be added to a webpage in different ways:

1. External Stylesheets: Linking an external .css file using the <link> tag.
2. Internal Stylesheets: Writing CSS inside a <style> tag in the HTML document.
3. Inline Styles: Directly adding styles to HTML elements using the style attribute.

Processing the Loaded CSS

Once the CSS is loaded, it’s not immediately ready for use. The browser first reads the CSS as a series of code points (basically, the characters in your CSS file). This task is pretty easy, but there are few code points that are totally invalid from CSS’s point of view. If a browser finds any invalid codepoints, it usually discards the rules that follow the error.

Before the actual processing begins, some of these code points might be swapped out. This is done to simplify the next stages of turning CSS into CSSOM.

In a nutshell, this step involves:

• Loading CSS from various sources.
• Checking and handling errors.
• Preparing the code for the next stage - tokenization.

Section 3: Step 2 - Tokenization

What is Tokenization?

Tokenization in CSS is quite similar to how it works with HTML, which I explained in the ”How HTML becomes DOM” article. It’s the process of breaking down the CSS code into manageable pieces, known as tokens.

How Tokenization Works

The browser reads the CSS code point by point, like reading a book letter by letter. These code points are grouped into tokens. A token could be anything - a word, a colon, a semicolon, or curly braces. Think of it like recognizing words and punctuation while reading.

For example, in CSS, {, }, :, ;, and property names are all different types of tokens. This process is crucial because it lays the groundwork for the next step - parsing.

In a nutshell, this step involves:

• Tokenization is about breaking CSS into tokens.
• Each character is analyzed to form these tokens.
• It sets the stage for parsing, where these tokens start making sense as CSS rules.

Step 3 - Parsing

The Role of Parsing in CSS

Parsing is the phase where the browser starts making sense of the tokens it collected in the tokenization step. This is where the CSS begins to take on a structured form. At the end of the process, we end up with CSSOM, represented as CSSStyleSheet.

How Parsing Works

The stream of tokens is now analyzed to form CSS rules and declarations (and other CSS entities). These rules are organized into a tree structure. This tree is not just a random collection but a well-organized representation of all your CSS rules.

For valid CSS, it neatly places the CSS fragments into the tree. Invalid CSS, like misplaced properties or syntax errors, are handled differently. The browser might try to fix some errors at the parsing stage or not check for validity at first and run necessary checks after the tree construction.

The only part of the CSS that does not appear in the tree are comments. These are ignored and don’t make it into the tree.

The tree is not just your CSS; it also includes default styles applied by the browser. This tree is what we call a CSSStyleSheet object in technical terms. This is a crucial part of the CSSOM. It holds all your styled rules, including the browser’s default styles.

The Result - CSSOM

CSSOM, standing for CSS Object Model, is the final product of the CSS parsing process. It’s a dynamic model that represents all the CSS of a webpage. But CSSOM is more than just a static representation; it’s interactive and editable.

Key Features of CSSOM

1. Access and Modification: CSSOM allows you to access and change the styling of a webpage dynamically. This is crucial for JavaScript-based interactions.
2. Necessary for Rendering: The browser uses CSSOM along with the DOM (Document Object Model) to render the webpage. It’s an essential step in the visual rendering process of any website. That’s why CSS loading is blocking.

Interacting with CSSOM

You can interact with CSSOM using JavaScript. For instance, if you open your browser’s developer tools and type something like:

$("h1").style; // CSSStyleDeclaration ...
document.styleSheets; // StyleSheetList ...

You will interact with CSSOM. In the first example, when you access an element’s style using JavaScript, you’re interacting with an instance of the CSSStyleDeclaration interface. This interface is a part of the CSSOM specification and provides a way to access and modify the inline styles of an element.

In the second example, StyleSheetList contains all the stylesheets loaded for the document and it’s also a CSSOM object.

In essence, CSSOM is what turns your static CSS into a living part of the webpage, interacting with user actions and scripts, and contributing to the overall user experience.

Let’s end with a good old FAQ:

Is CSS parsing costly?

Compared to other operations modern websites do, parsing CSS is relatively cheap. Of course the more complicated the stylesheet is the more costly it gets, but compared to JavaScript parsing it is less taxing.

How much my website spend on CSS parsing

Let’s look at the example from my website. This site inlines all of the CSS in HTML to skip render-blocking requests and it hints at the fact I use very minimal CSS here.

As you can see it took 5,6ms. Recalculating style means both parsing CSS and style calculations. You can see the results for your website if you are curious.

Can changes to the DOM affect the CSSOM?

Not really. CSSOM still will remain the same as it’s the reflection of CSS, not HTML or DOM. Changes to DOM will affect the render tree, where CSSOM and DOM are merged to produce a visual representation of a website.

And that’s a wrap! Understanding the journey from CSS to CSSOM gives you a deeper insight into how web browsers interpret and utilize the styles we write. It’s not just about writing CSS; it’s about understanding how that CSS comes to life on the screen.