Intent to Ship: Comma-separated Container Queries

[Rune Lillesveen]

Contact emails

fut...@chromium.org

Specification

https://drafts.csswg.org/css-conditional-5/#container-rule

Summary

Support multiple queries per @container rule. The @container rule applies if at least one of the queries matches.

This makes it possible to have fallback queries for features which are not supported in all browsers, for instance.

Example:

@container --name1 not-supported(--foo: bar), --name2 (width > 600px) {}

Along with the support for multiple queries, the object model is extended to support the 'conditions' attribute on the CSSContainerRule API.

Blink component

Blink>CSS

Web Feature ID

container-queries

Motivation

Catching up with the specification and improve interoperability (covered by Interop 2026)

Initial public proposal

No information provided

TAG review

No information provided

TAG review status

Not applicable

Goals for experimentation

None

Risks

Interoperability and Compatibility

No information provided

Gecko: Shipped/Shipping (https://bugzilla.mozilla.org/show_bug.cgi?id=2019254)

WebKit: No signal (https://github.com/WebKit/standards-positions/issues/659)

Web developers: No signals

Other signals:

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

No information provided

Debuggability

Fixing https://crbug.com/507611251 is necessary to allow editing the full query in the styles pane and will be fixed before enabling this feature. Identifying the matched container element does not support multiple containers, which means for the case below, there will not be a link to the matched container when --unknown is not the query that matches: @container --unknown, --found {} In order to support that, the devtools protocol needs to pass which query in the @container rule that matched.

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?

Yes

Is this feature fully tested by web-platform-tests?

Yes
https://wpt.fyi/css/css-conditional/container-queries/at-container-parsing.html

https://wpt.fyi/css/css-conditional/container-queries/at-container-serialization.html

https://wpt.fyi/css/css-conditional/container-queries/comma-separated-invalidation.html

https://wpt.fyi/css/css-conditional/container-queries/comma-separated-skip-invalid.html

https://wpt.fyi/css/css-conditional/container-queries/container-rule-cssom.html

https://wpt.fyi/css/css-conditional/container-queries/multiple-size-containers-comma-separated-queries.html

https://wpt.fyi/css/css-conditional/container-queries/multiple-style-containers-comma-separated-queries.html

Flag name on about://flags

enable-experimental-web-platform-features

Finch feature name

CommaSeparatedContainerQueries

Rollout plan

Will ship enabled for all users

Requires code in //chrome?

False

Tracking bug

https://crbug.com/41491726

Availability expectation

This is covered by Interop 2026 tests and shipped in Firefox. Expect baseline within 12 months.

Estimated milestones

Shipping on desktop	150
DevTrial on desktop	149
Shipping on Android	150
DevTrial on Android	149
Shipping on WebView	150

Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).

No information provided

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/6196591858941952?gate=4700445638524928

This intent message was generated by Chrome Platform Status.

--

Rune Lillesveen

[Vladimir Levin]

The results for these three WPTs seem to be missing, is this expected?

https://wpt.fyi/css/css-conditional/container-queries/comma-separated-invalidation.html

https://wpt.fyi/css/css-conditional/container-queries/comma-separated-skip-invalid.html

https://wpt.fyi/css/css-conditional/container-queries/container-rule-cssom.html

Thanks!

Vlad

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CACuPfeRbXEP%3DcniRT_OB%2BGb%2BqJLamc-500Az%3DF1XJmRJw530NQ%40mail.gmail.com.

[Rune Lillesveen]

The container-rule-cssom.html one was borked because of a missing space in the chromestatus entry. Fixed that on chromestatus now.

The other two landed earlier today, so just haven't had the time yet. I hoped they would have results before anyone reviewed this I2S, but you're too fast.

--

Rune Lillesveen

[Dan Clark]

LGTM1

[Chris Harrelson]

LGTM2

To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/c5759f8b-c665-4b7b-bfc0-b05f3bab9c9fn%40chromium.org.

[Vladimir Levin]

LGTM3