CSS style container queries (custom properties)

[mayank99]

Description

Style container queries (not to be confused with size container queries) allow for any styles to be queried from a parent container. This issue is specifically about querying custom properties rather than standard properties.

Example:

:root {
  --theme: dark;
}
body {
  @container style(--theme: dark) {
    color: white;
    background: black;
  }
}

Specification

https://drafts.csswg.org/css-contain-3/#style-container

Open Issues

No response

Tests

https://wpt.fyi/results/css/css-contain/container-queries?label=experimental&label=master&aligned&q=path%3A%2Fcss%2Fcss-contain%2Fcontainer-queries%2Fat-container-style-parsing.html%20or%20path%3A%2Fcss%2Fcss-contain%2Fcontainer-queries%2Fat-container-style-serialization.html%20or%20path%3A%2Fcss%2Fcss-contain%2Fcontainer-queries%2Fcustom-property-style-queries.html%20or%20path%3A%2Fcss%2Fcss-contain%2Fcontainer-queries%2Fcustom-property-style-query-change.html%20or%20path%3A%2Fcss%2Fcss-contain%2Fcontainer-queries%2Fdisplay-contents-dynamic-style-queries.html%20or%20path%3A%2Fcss%2Fcss-contain%2Fcontainer-queries%2Fnested-size-style-container-invalidation.html%20or%20path%3A%2Fcss%2Fcss-contain%2Fcontainer-queries%2Fquery-evaluation-style.html%20or%20path%3A%2Fcss%2Fcss-contain%2Fcontainer-queries%2Fstyle-container-invalidation-inheritance.html%20or%20path%3A%2Fcss%2Fcss-contain%2Fcontainer-queries%2Fstyle-container-for-shadow-dom.html%20or%20path%3A%2Fcss%2Fcss-contain%2Fcontainer-queries%2Fstyle-query-with-unknown-width.html

Current Implementations

• Blink
• Gecko
• WebKit

Standards Positions

Gecko: mozilla/standards-positions#686
Webkit: WebKit/standards-positions#57
Blink: https://groups.google.com/a/chromium.org/g/blink-dev/c/ACL23q_nbK0/m/PaNJ81_qDAAJ

Browser bug reports

Gecko: https://bugzilla.mozilla.org/show_bug.cgi?id=1795622
Webkit: https://bugs.webkit.org/show_bug.cgi?id=246605
Blink: https://bugs.chromium.org/p/chromium/issues/detail?id=1302630

Developer discussions

These articles demonstrate some good use cases:

• https://ishadeed.com/article/css-container-style-queries/
• https://una.im/style-queries/

Polls & Surveys

No response

Existing Usage

No response

Workarounds

No response

Accessibility Impact

No response

Privacy Impact

No response

Other

There is some useful discussion here about separating custom property queries from standard property queries: w3c/csswg-drafts#7185

[wpt-interop]

Thank you for proposing CSS style container queries (custom properties) for inclusion in Interop 2024.

We wanted to let you know that this proposal was not selected to be part of Interop this year.

This is because we got many more proposals than we could include in this year's project. Note that individual vendors may nevertheless choose to advance work in this area during the forthcoming year. We would welcome this proposal being resubmitted again next year if necessary.

For an overview of our process, see proposal selection. Thank you again for contributing to Interop 2024!

Posted on behalf of the Interop team.