Containers, What Do They Know?
summary
Browsers now implement CSS container queries but only when elements are marked as containers (use container-type: inline-size or size) and when containment prevents feedback loops, so use inline-size containment for most layouts and reserve full size containment for scrollable boxes. Container queries measure ancestor element boxes (children cannot self‑query), support named containers and CQ units (container-relative vw/vh equivalents), work well with web components, and enable style queries and state queries emerging in engines; polyfills are possible but slower than native.
AI-written summary · about
chapters (9)
- 0:00The history of containers
- 2:36The infinite loop problem
- 7:46The evolution of responsive web
- 11:08Implementing container queries
- 17:04Using container query syntax
- 22:17Advanced layout strategies
- 28:26Container query units
- 31:16Style and state queries
- 37:18Q&A and CSS best practices
related talks
54mCSS Containers, What Do They Know?
17mContainer queries, the next step towards a truly modular CSS
48mWhat Are Container Queries and Why You Need Them
19mContainer Queries
28mContainer Queries: The Past, Future, and How You Can Actually Even Use Them Today
45mSolving container queries today
22mThe next step towards a truly modular CSS
19mContainer Queries vs. Media Queries