Braces to Pixels
summary
Shows exactly how CSS becomes pixels: a step‑by‑step rendering pipeline from CSSOM and cascade through style computation, box tree generation and layout to paint and compositing, with concrete examples (line breaking, floats, shrink‑to‑fit, multicolumn fragmentation). Demonstrates that transforms can stay on the compositor while margin/border changes force layout, uses browser devtools and Windows Performance Analyzer, and warns that DOM read/write thrashing causes repeated pipeline flushes.
AI-written summary · about
chapters (21)
- 0:00Intro
- 1:00Overview
- 2:21Pipeline
- 3:29Parsing
- 4:19Style
- 5:30Style Computation
- 6:43Style Computation Examples
- 7:40Cascade
- 11:44Containing Blocks
- 13:46Flow
- 14:22Box Generation
- 16:02Anonymous Boxes
- 16:58Hello World
- 18:44Content Measure
- 21:46Fragmentation
- 24:44Painting
- 25:31Stacking Context
- 27:45Box Shadow
- 28:48Compositing
- 30:53Validation
- 37:58Optimization
related talks
30mPulling Back the Curtains From Your Stylesheets
39mLife of a pixel: A visual explanation of rendering performance
30mBrowser Graphics Under the Hood
46mEfficient CSS Animations
42mRendering performance from the ground up
35mScaling CSS Layout Beyond Pixels
27mIf your CSS is happy and you know it....clap your hands
20mIt's Not Dark Magic, Pulling Back the Curtains From Your Stylesheets