#592: Early design review of CSS Container Queries proposal

Visit on Github.

Opened Jan 5, 2021

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):

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

Discussions

Discussed Jan 1, 2021 (See Github)
  • Perhaps add physical keywords as well?
  • Can you nest MQ inside this?
  • We are happy to see this work and the proposal seems well thought out. 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.
Comment by @LeaVerou Jan 26, 2021 (See Github)

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

Comment by @mirisuzanne Jan 26, 2021 (See Github)

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

Discussed Feb 15, 2021 (See Github)

Lea: Ken & I posted some feedback - and requestor said they would work on it...

Rossen: CSS accepted it as part of "contain" - new module. Starting work as part of CSS wg charter.

Peter: are we ready to close this then?

Ken: from TAG pov we have given our feedback and blessing...

Dan: feels to me like we should close it and ask them to open up a new issue when appropriate.

Lea: I will close.

resolved to close

Comment by @LeaVerou Feb 15, 2021 (See Github)

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.

Comment by @lilles Sep 6, 2022 (See Github)

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

Comment by @LeaVerou Sep 7, 2022 (See Github)

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.