Container queries, the next step towards a truly modular CSS
summary
Container queries let each component own responsive rules by querying ancestor container dimensions via the new container property and the @container rule (syntax mirrors @media), relying on CSS containment for performant isolation. Examples include a responsive shopping‑cart component and SVG sprite images that adapt at different sizes and they work in demos. Experimentation runs in Chrome Canary behind enable‑container‑queries or via a JavaScript polyfill; production use is not recommended yet.
AI-written summary · about
chapters (9)
- 0:00Intro
- 1:37Maartens background
- 2:09What is container queries
- 3:35Additional customization options
- 5:43Why container queries
- 11:46Experiments
- 12:48Use case
- 13:37SVGs
- 15:51Outro
related talks
54mCSS Containers, What Do They Know?
22mThe next step towards a truly modular CSS
48mWhat Are Container Queries and Why You Need Them
49mContainers, What Do They Know?
17mThe New Responsive: Web Design in a Component-Driven World
19mContainer Queries
19mContainer Queries vs. Media Queries
28mContainer Queries: The Past, Future, and How You Can Actually Even Use Them Today