5Phase 5 of 12

CSS parsing & CSSOM

Stylesheets become a structured model the renderer can query.

stylesheet

body {
 color: #0a0a0a;
 font-family: sans-serif;
}
h1 {
 font-size: 2rem;
 font-weight: 600;
}
.btn {
 padding: 8px 16px;
}

CSSOM

Animation loop, let it play, or use the controls.

CSS bytes are parsed into a CSSOM (CSS Object Model), a structured representation of every stylesheet, rule, selector, and declaration that scripts and the rendering engine can both query. Unlike HTML parsing, CSS is render-blocking: the browser will keep parsing HTML, but it refuses to paint anything until it has all the matching stylesheets, because applying styles partially would cause a flash of unstyled content.

Selectors are matched right-to-left during style computation. Once the CSSOM is built, every DOM node gets its computed style, the cascade resolved, inherited values filled in, units normalised.

Takeaway

Until the CSSOM is built, the browser knows the structure of the page but not what it should look like. CSS is a render-blocking resource for that reason.