CSS Output & Performance
4 lessonsAbout 24 minutesAdvanced
This part of the CSS Tutorial runs from Print Styles through to Debugging CSS. There are 4 lessons here, and working through them takes about 24 minutes at a steady pace.
It follows on from CSS Accessibility, so finish that first if you have not already — the examples below assume you are comfortable with it.
Each lesson below says what it covers before you open it. Read them in order the first time; afterwards this page works as a index you can jump back into when you need to check one thing.
- 1Print StylesPrepare documents for paper and PDF with print media rules, page breaks, and sensible URL treatment. It covers print media queries, page margins, fragmentation, hiding interface chrome, conserving ink, and preserving destination URLs.
- 2CSS PerformanceUse containment and deferred rendering where measurement shows a real rendering cost. You will use layout and paint containment, content-visibility, intrinsic placeholder sizes, and measurement-driven performance checks.
- 3CSS ArchitectureOrganize tokens, base rules, components, utilities, and exceptions so a stylesheet remains easy to change. The chapter organizes tokens, base rules, components, utilities, variants, layers, selector weight, and the maintenance of exceptions.
- 4Debugging CSSTrace computed values, layout constraints, stacking contexts, and overflow with browser developer tools. It provides a repeatable workflow for matched rules, computed values, box dimensions, Grid and Flex overlays, stacking contexts, overflow, and reduced test cases.