Intent to Ship: Comma-separated Container Queries

55 views
Skip to first unread message

Rune Lillesveen

unread,
9:39 AM (3 hours ago) 9:39 AM
to blink-dev
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/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 desktop150
DevTrial on desktop149
Shipping on Android150
DevTrial on Android149
Shipping on WebView150


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

unread,
10:37 AM (2 hours ago) 10:37 AM
to Rune Lillesveen, blink-dev
The results for these three WPTs seem to be missing, is this expected?
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

unread,
11:45 AM (1 hour ago) 11:45 AM
to Vladimir Levin, blink-dev
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

Reply all
Reply to author
Forward
0 new messages