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