CSS Containers, What Do They Know?
summary
Explains why container queries were “impossible” and how CSS containment + a breaking rule for layout loops makes them viable, shows container-type: inline-size as the practical API, demos include nested stress tests (36 levels) and a bookstore component that adapts as it moves, announces full support in major browsers plus a Chrome Labs polyfill, shows container query units (cqw cqh cqmin cqmax) that fall back to viewport, and notes 16 as a cited heuristic for “how many containers.”
AI-written summary · about
chapters (15)
- 0:00Introduction
- 9:43What do containers know
- 16:18Why does it work
- 16:36Why they shouldnt work
- 25:00Size containment
- 26:46Style layout containment
- 29:08Container types
- 31:45Container queries vs media queries
- 37:34Container measurements
- 39:59Container query units
- 41:09Small viewport units
- 45:03Style queries
- 46:23Style on normal properties
- 51:59State queries
- 53:44Questions
related talks
49mContainers, What Do They Know?
17mContainer queries, the next step towards a truly modular CSS
45mSolving container queries today
22mThe next step towards a truly modular CSS
19mContainer Queries
46mNew things we love and more things we want in CSS
28mContainer Queries: The Past, Future, and How You Can Actually Even Use Them Today
50mStyling the Future: A Deep Dive into Modern CSS