@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.
- WICG: Use Cases and Requirements
- Chris Coyier: Let’s Not Forget About Container Queries
- Chris Coyier: Container Query Discussion
- Zach Leatherman: The Origin Story of Container Queries
Existing Solutions ¶
Who is Working on Container Queries contains a long list of existing JS plugins.
There are also some interesting CSS custom-property solutions.
These all work one-property-at-a-time,
much like the
- Heydon Pickering: Flexbox Holy Albatros
- Xiao Zhuo Jia: Unholy Albatross
- Mathias Hülsbusch: The Raven Technique
My Notes ¶
These different directions are not exclusive – a full solution for styling responsive components will likely require multiple approaches.