Responsive Components

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.

Resources ¶

• 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 switch() proposal…

• 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.

• Potential Grid Improvements
• Interpolated Values
• Container Queries
  • Comparing Switch & Container
  • Containment
  • Container Selection Syntax Implications
  • Proposal & Explainer
  • Explicit Syntax
  • Switch Function
• Container Style Queries
  • Style Query Explainer
  • Use-Cases for Style Queries