Early design review of CSS Container Queries proposal

[mirisuzanne]

HIQaH! QaH! TAG!

I'm requesting early TAG review of my proposal for CSS Container Queries.

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. My proposal builds on David Baron's @container approach, which works by applying size & layout containment to the queried elements. In order to make that less restrictive for authors, I've also proposed a path forward for inline-size (and maybe block-size) values on the contain property.

• Explainer: https://github.com/oddbird/css-sandbox/blob/main/src/rwd/query/explainer.md
• Security and Privacy self-review: This proposal does not expose anything new, and has no impact on security or privacy
• Primary contacts (and their relationship to the specification):
  • Miriam Suzanne, @mirisuzanne, Invited Expert, author
  • Rune Lillesveen, @lilles, Google, contributor
  • Anders Hartvoll Ruud, @andruud, Google, contributor
  • Rossen Atanassof, @atanassov, Microsoft, co-chair
  • Alan Stearns @astearns, Adobe, co-chair
• Organization/project driving the design: CSSWG
• External status/issue trackers for this feature (publicly visible, e.g. Chrome Status):
  • Chrome Intent to Prototype

Further details:

• I have reviewed the TAG's API Design Principles
• The group where the incubation/design work on this is being done (or is intended to be done in the future): CSSWG
• The group where standardization of this work is intended to be done ("unknown" if not known): CSSWG
• Existing major pieces of multi-stakeholder review or discussion of this design: CSSWG Issue
• Major unresolved issues with or opposition to this design: No known opposition
• This work is being funded by: Google

We'd prefer the TAG provide feedback as 💬 leave review feedback as a comment in this issue and @-notify @mirisuzanne & @andruud

[LeaVerou]

@kenchris and I discussed this in our VF2F breakout today. We are happy to see this work and the proposal seems well thought out for a first level that could later be expanded. It is unclear whether the additions to containment are only inline-size and block-size or their physical counterparts as well. We would recommend that both be available. It may also be good to include examples that combine media queries and container queries.

[mirisuzanne]

Thank you both! That makes sense – I'll work on the updates in time for the CSSWG VF2F.

[LeaVerou]

As previously stated, we are happy with the current state. In a breakout today, we resolved to close this early review issue, and will continue to monitor open issues for future review requests as this feature evolves.

[lilles]

We are looking at style() container queries in Chrome. Should we file a new issue for that part of container queries?

[LeaVerou]

We are looking at style() container queries in Chrome. Should we file a new issue for that part of container queries?

Given that these were added after this review, yes please.