@ Released in Browsers
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,
with a syntax that is similar to media queries.
We also define ‘container-relative units’ (cq*)
that match the existing ‘viewport-relative units’ (v*).
Resources
- MDN documentation
- Use the Right Container Query Syntax by Miriam Suzanne
- Container Queries: a Quick Start Guide by David Herron
- A Primer On CSS Container Queries by Stephanie Eckles at Smashing Magazine
- Say Hello To CSS Container Queries by Ahmad Shadeed
- CSS Container Queries For Designers by Ahmad Shadeed
- Container Queries in Web Components by Max Böck
- Container Queries are actually coming by Andy Bell
- CSS Container Queries: A First Look + Demo by Bramus Van Damme
- Next Gen CSS: @container by Una Kravets
- CSS Container Queries: Use-Cases And Migration Strategies by Adrian Bece at Smashing Magazine
- Twitch live-stream highlights by Stephanie Eckles
- CSS Container Query Units by Ahmad Shadeed
- Container Units Should Be Pretty Handy by Chris Coyier at CSS-Tricks
Browser Support
