The Container Queries Wave: A Roundup of Resources
It’s been hard to miss the recent flood of articles about CSS Container Queries. The conversation began heating up back in December after Miriam Suzanne posted a proposal (building on David Baron’s proposal), but things really took off in late March when Una Kravets announced the feature had landed in Chrome Canary 91.0.4459.0 behind the #enable-container-queries flag in chrome://flags.
The specification isn't final, but the community has already produced an impressive wealth of tutorials, demos, and discussions. Here's a selection of what has crossed our desks.
Getting Started with Container Queries
Miriam Suzanne's explainer is an excellent starting point, offering the elevator pitch for the feature alongside examples and further resources.
For a quick dive into the syntax, David Herron's introductory piece on the Oddbird blog uses a card component example to show how container queries work in practice.
Stephanie Eckles takes a much deeper approach over on Smashing Magazine, first outlining the problems container queries solve before walking through the details of syntax and implementation.
Andy Bell jumps straight in with his own card example, celebrating a feature he's been waiting years to use.
Demos and Creative Use Cases
Una Kravets’ calendar demo has quickly become a favorite, showing a component adjusting everything from font sizes to layout based on its own space. It's part of a broader piece at CSS-Tricks that's worth a look.
Ahmed Shadeed is known for clear explanations and demos that go beyond the usual examples. His container queries article explores some less-common applications of the feature.
Bramus publishes an earlier first-look demo that helped spark the current wave of interest.
As with many new technologies, container queries pair well with other ideas. Max Böck combines @container with web components to create book-display elements. Sara Soueidan, meanwhile, looks at component-level art direction, particularly the gotchas of using the <picture> element with @container.
For a different take entirely, Jhey Tompkins went looking for something unrelated to cards and explored whether a "resize hack" could be created using container queries.
Discussions, Polyfills, and the Future
There are several places to hear leading voices talk through the details. Bruce Lawson and Vadim Makeev discuss container queries with Miriam Suzanne on their podcast. Kevin Powell's video demonstrates how auto-fill and minmax() grids become a natural fit for components that style themselves based on their current width.
Scott Tolinski looks at cqfill, a polyfill for container queries. One standout takeaway from his video is the addition of transitions on the changed properties. Bramus has also written up his own look at the same polyfill.
Miriam Suzanne also presented a conference talk on container queries and the future of CSS, which gives a broader perspective on where the feature fits within the larger stylesheet ecosystem. Una Kravets and Brian Kardell both connect container queries to related developments that aim to make CSS more responsive in a component-driven world.
Adrian Bece, writing on Smashing Magazine, notes one key gap: there aren't DevTools available for container queries yet, which can make debugging tricky.
For those who consider themselves designers rather than developers, Ahmad Shadeed suggests it's time to start thinking about how container queries affect design workflows. He proposes that documenting component-specific breakpoints may currently be the best approach for cross-disciplinary teams.
The conversation may be young, but the breadth of material is already substantial. To that end, a challenge: look through your CSS codebase with fresh eyes, knowing how @container queries currently work. Which media queries will you replace (once we reasonably can) and which ones have to remain? If you find the answer to that question worth exploring, consider blogging about it.
