cssom

CSS is received as text, but the browser needs a structured representation to compute styles for each DOM element. Raw CSS text can’t be queried programmatically.

CSSOM (CSS Object Model) is the tree structure created by parsing CSS. It contains all style rules and is used to compute styles for each DOM element during render tree construction.

1. CSS Received: From stylesheets, <style> tags, inline styles
2. Parse: Convert to CSSOM tree

   body { color: red; }
   ↓
   CSSOM: selector=body, declarations=[color: red]
   

3. Style computation: For each DOM element, find matching CSSOM rules
4. Cascading: Apply specificity, inheritance, !important

• CSSOM is separate from DOM (different trees)
• JavaScript can manipulate CSSOM via document.styleSheets
• CSS parsing blocks rendering (need styles before paint)
• Media queries evaluated during CSSOM construction

• Built from: CSS Parsing — CSSOM is the output
• Builds into: Render Tree — CSSOM + DOM = render tree
• Related: DOM Tree — CSSOM styles are applied to DOM
• Related: Browser Rendering — CSSOM is step 2

• document.write() in old browsers could break CSSOM
• Large stylesheets = slow CSSOM construction
• @import causes additional network requests
• CSSOM errors are silently ignored