| css spec
CSS Containment Level 3 defines Container Queries and container-relative units – allowing authors to build more intrinsic responsive components without knowledge of the overall layout.
Media-queries allow an author to make style changes
based on the overall viewport dimensions –
but in many cases,
authors would prefer styling modular components
based on their context and available space within a layout.
Earlier this year,
David Baron & Brian Kardell
proposed two complementary approaches to explore:
a @container rule,
and a switch() function.
Both could be useful in different cases.
This specification builds on David Baron’s @container approach,
which works by applying size & layout containment
to the queried elements.
Any element with both size & layout containment
can be queried using a new @container rule,
with similar syntax to existing media-queries.
We also define ‘container-relative units’ (cq*)
that match the existing ‘viewport-relative units’ (v*).
Resources
- Container Units Should Be Pretty Handy by Chris Coyier at CSS-Tricks
- CSS Container Query Units by Ahmad Shadeed
- Twitch live-stream highlights by Stephanie Eckles
- CSS Container Queries: Use-Cases And Migration Strategies by Adrian Bece at Smashing Magazine
- Next Gen CSS: @container by Una Kravets
- CSS Container Queries: A First Look + Demo by Bramus Van Damme
- Container Queries are actually coming by Andy Bell
- Container Queries in Web Components by Max Böck
- CSS Container Queries For Designers by Ahmad Shadeed
- Say Hello To CSS Container Queries by Ahmad Shadeed
- A Primer On CSS Container Queries by Stephanie Eckles at Smashing Magazine
- Container Queries: a Quick Start Guide by David Herron
- MDN documentation
Timeline & Documents
- Working Draft (Dec 21, 2021)
- Editor’s Draft (Feb 26, 2021)
- Proposal & Explainer (Dec 15, 2020)
- Public Notes (Nov 14, 2020)
Browser Support
9 ‘container queries’ episodes
2021
| podcast
What’s Happening in CSS & Sass @ Front End Nerdery
A podcast focusing on front end development but also covering a wide range of web development and design topics. We talked about CSS, Sass, and work being done in the W3C CSS Working Group.
| podcast
CSS Container Queries, Layers, Scoping and More @ Syntax.fm
In this episode of Syntax, Scott and Wes talk with Miriam about all things CSS – container queries, layers, scoping, and more!
| podcast
CSSWG, Container Queries, Scope, and Layers @ Word Wrap Show
I talk with Claire and Steph about my journey into webdev and onto the CSSWG, what I find frustrating about how others use CSS, and the three specs I’m working on.
| podcast
Container Queries & the CSSWG @ The F-Word
I chat with Bruce Lawson & Vadim Makeev about Sass & Susy, CSS Layers & compatibility, Container Queries, and the CSS Working Group.
| article
Container Queries Explainer & Proposal @ CSSWG
Media-queries allow an author to make style changes based on the overall viewport dimensions – but in many cases, authors would prefer styling modular components based on their context within a layout.
| css spec
CSS Containment 3 (Container Queries) @ Editor’s Draft
2020
| css spec
CSS Containment 3 (Container Queries) @ Proposal & Explainer
| css spec