[w3ctag/design-reviews] Design and specification review of CSS Container Queries Style Features (Issue #787)

Wotcher TAG!

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

[TAG guidelines](https://w3ctag.github.io/webcomponents-design-guidelines/#:~:text=Don%E2%80%99t%20use%20custom%20attributes%20for%20styling) 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](https://github.com/w3c/csswg-drafts/issues/5989)
    - [Define a syntax for style-based container queries #6396](https://github.com/w3c/csswg-drafts/issues/6396)
    - [Extend style query syntax? #7068](https://github.com/w3c/csswg-drafts/issues/7068)
    - [Higher level custom properties that control multiple declarations #5624](https://github.com/w3c/csswg-drafts/issues/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](https://www.w3.org/TR/design-principles/)
  - Relevant time constraints or deadlines: No specific deadline
  - 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)

-- 
Reply to this email directly or view it on GitHub:
https://github.com/w3ctag/design-reviews/issues/787

You are receiving this because you are subscribed to this thread.

Message ID: <w3ctag/design-reviews/issues/787@github.com>