Design and specification review of CSS Container Queries Style Features

[mirisuzanne]

Wotcher TAG!

I'm requesting a TAG review of Style Features for Container Queries.

TAG guidelines state that custom attributes should not be used for styling, and authors should rely on CSS custom properties instead. However, custom properties are currently limited to carrying a single value, making it hard to achieve any more complex impact beyond simple value substitution. Meanwhile, container queries allow authors to write conditional CSS based on an ancestor 'container' element. Browsers are already broadly shipping 'dimensional' container queries. By adding the ability to query 'style features' as well, we can use the container query syntax to help solve this long-standing issue for authors.

• Explainer¹ (minimally containing user needs and example code): https://css.oddbird.net/rwd/style/explainer/
• Specification URL: https://www.w3.org/TR/css-contain-3/
• Tests: https://github.com/web-platform-tests/wpt/tree/master/css/css-contain/container-queries (along side size query features)
• User research: [url to public summary/results of research]
• Security and Privacy self-review²: This proposal does not expose anything new, and has no impact on security or privacy. While there are existing privacy concerns about revealing certain values from e.g. visited links, those issues are addressed by the other specifications. The computed values queried by this feature already have safety measures in place.
• GitHub repo (if you prefer feedback filed there): https://github.com/w3c/csswg-drafts/
• Primary contacts (and their relationship to the specification):
  • Miriam Suzanne, @mirisuzanne, Invited Expert, spec co-author
  • Tab Atkins Jr, @tabatkins, Google, spec co-author
  • Florian Rivoal, @frivoal, Invited Expert, spec co-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(s)/project(s) driving the specification: CSSWG
• Key pieces of existing multi-stakeholder review or discussion of this specification:
  • What container features can be queried? #5989
  • Define a syntax for style-based container queries #6396
  • Extend style query syntax? #7068
  • Higher level custom properties that control multiple declarations #5624
• External status/issue trackers for this specification (publicly visible, e.g. Chrome Status):

Further details:

• [x] I have reviewed the TAG's Web Platform Design Principles
• Relevant time constraints or deadlines: No specific deadline, but interest in shipping when possible
• The group where the work on this specification is currently being done: CSSWG
• The group where standardization of this work is intended to be done (if current group is a community group or other incubation venue): CSSWG
• Major unresolved issues with or opposition to this specification: No major issues, but some hesitation expressed by implementors around querying non-custom properties
• This work is being funded by: Google

You should also know that...

There is already a partial (custom properties only) prototype implementation in Chromium v107+ behind the 'experimental web platform features' flag.

We'd prefer the TAG provide feedback as (please delete all but the desired option):

🐛 open issues in our GitHub repo for each point of feedback

( also ok to 💬 leave review feedback as a comment in this issue and @-notify mirisuzanne if that's simpler)

[LeaVerou]

Making this part of container queries circumvents a lot of the issues we faced when we were trying to define a separate conditional rule. Also restricting it to custom properties and equality at first does simplify a host of other hard issues, while addressing a large percentage of use cases. Please make sure that the syntax allows extension in the future (both in terms of querying other properties, as well as querying ranges of values).

I don’t personally see any architectural issues with this, and would be happy to see it move forwards. I do see some smaller design issues and have some questions, for which I will file separate issues in the CSS WG repo.

[LeaVerou]

We discussed this in a breakout today and we decided my comment above does, in fact, reflect our consensus, so we're gonna go ahead and close this. Thank you for flying TAG! ✈️