Note that container style queries only support custom properties

[RizgarOzan]

Description

The Firefox 151 release notes said @container style() queries let you check "a valid CSS declaration, a CSS property, or a custom property", and the @container reference shows style(background-color: red) / style(color: green) examples with no caveat. No browser supports style features other than custom properties. This updates the release note entry and adds a note to the @container style query section, linking to the guide section that already covers this.

Motivation

CSS Conditional 5 §6.2 allows any supported CSS property as a style feature, but every engine only implements custom properties, so readers copying the reference examples get queries that never match.

Additional details

Checked in Chromium (headless Edge 153): a container with --x: 1; color: rgb(0, 128, 0); display: block; border: 2px solid red, where every query below is true per the spec:

style(--x: 1)                         matches=true
style(--x)                            matches=true
style(color: rgb(0, 128, 0))          matches=false
style(color: green)                   matches=false
style(display: block)                 matches=false
style(color)                          matches=false
not style(background-color: red)      matches=false
style(border: 2px solid red)          matches=false

All of them parse (the conditionText is kept); they just never match.

Not tested in Firefox or Safari, but their parsers only accept custom property names:

• Gecko: StyleFeaturePlain::parse
• WebKit: consumeStyleFeature (isCustomPropertyName)

The containment guide already states this limitation in several places, so I left it unchanged.

Lint on the changed files: markdownlint-cli2 (repo config) 0 issues, prettier clean, cspell 0 issues.

Related issues and pull requests

Fixes #44701

[github-actions]

Preview URLs (2 pages)

• /en-US/docs/Mozilla/Firefox/Releases/151
• /en-US/docs/Web/CSS/Reference/At-rules/@container

External URLs (4)

URL: /en-US/docs/Mozilla/Firefox/Releases/151
Title: Firefox 151 release notes for developers

• https://bugzil.la/2016929 (1 time) (Note! This may be a new URL 👀)
• https://bugzil.la/2019254 (1 time) (Note! This may be a new URL 👀)
• https://bugzil.la/2024601 (2 times) (Note! This may be a new URL 👀)
• https://bugzil.la/2030645 (1 time) (Note! This may be a new URL 👀)

(comment last updated: 2026-09-22 14:32:50)

[RizgarOzan]

Friendly ping - let me know if the wording should be adjusted.

[dletorey]

Friendly ping - let me know if the wording should be adjusted.

I shall be doing this tomorrow, thanks for the prod.

[dletorey]

Thank you

[dletorey]

Suggested change

- The [`@container`](/en-US/docs/Web/CSS/Reference/At-rules/@container) CSS at-rule supports [`style()`](/en-US/docs/Web/CSS/Guides/Containment/Container_size_and_style_queries#container_style_queries) queries. This allows you to check if a container has a custom property, optionally with a specific value, and apply styles to its children accordingly. As in other browsers, only custom properties are supported; queries for regular CSS properties, such as `style(color: green)`, never match. ([Firefox bug 2016929](https://bugzil.la/2016929), ([Firefox bug 2019254](https://bugzil.la/2019254)), ([Firefox bug 2024601](https://bugzil.la/2024601)), [Firefox bug 2030645](https://bugzil.la/2030645)).

- The [`@container`](/en-US/docs/Web/CSS/Reference/At-rules/@container) CSS at-rule supports [`style()`](/en-US/docs/Web/CSS/Guides/Containment/Container_size_and_style_queries#container_style_queries) queries. This allows you to check if a container has a custom property, optionally with a specific value, and apply styles to its children accordingly. As in other browsers, only [custom properties](/en-US/docs/Web/CSS/Reference/Properties/--*) are supported; queries for regular CSS properties, such as `style(color: green)`, never match. ([Firefox bug 2016929](https://bugzil.la/2016929), ([Firefox bug 2019254](https://bugzil.la/2019254)), ([Firefox bug 2024601](https://bugzil.la/2024601)), [Firefox bug 2030645](https://bugzil.la/2030645)).

[RizgarOzan]

Thanks, applied in 647c44c.