#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

2021-01-Kronos

Minutes

  • 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.
2021-02-15

Minutes

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