Skip to content

Early design review of CSS Container Queries proposal #592

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
1 task done
mirisuzanne opened this issue Jan 5, 2021 · 5 comments
Closed
1 task done

Early design review of CSS Container Queries proposal #592

mirisuzanne opened this issue Jan 5, 2021 · 5 comments
Assignees
Labels
Resolution: satisfied The TAG is satisfied with this design Review type: CG early review An early review of general direction from a Community Group Topic: CSS Venue: CSS WG

Comments

@mirisuzanne
Copy link

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.

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
Copy link
Member

@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
Copy link
Author

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

@LeaVerou
Copy link
Member

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
Copy link

lilles commented Sep 6, 2022

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

@LeaVerou
Copy link
Member

LeaVerou commented Sep 7, 2022

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Resolution: satisfied The TAG is satisfied with this design Review type: CG early review An early review of general direction from a Community Group Topic: CSS Venue: CSS WG
Projects
None yet
Development

No branches or pull requests

5 participants