Currently @media queries give us a way to adjust a design
based on device features, user-preferences, and viewport size.
But modern web development relies heavily on modular
“blocks” and “components”
that can be moved around.
Authors want a way to style these components based on more immediate context – like the width of a parent container – which might not match cleanly to viewport media.
Grid and flexbox both provide some tools for managing available space, so in addition to “container query” solutions, I also want to think about if/where they can also be improved for responsive design.
Related Notes
- 🚀 CSS Style Query Explainer
- CSS Style Queries
- Use-Cases for Style Queries
- Container Selection Syntax Implications
- CSS Grid Improvements
- Explicit Container Syntax
- Container Query Resources
- CSS Interpolated Values
- ✅ CSS Container Query Proposal & Explainer
- Containment
- Comparing Switch & Container
- Switch Function
- CSS Container Queries