@ Working Draft
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
