*Contact emails*
[email protected]
*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
<https://issues.chromium.org/issues?q=customfield1222907:%22Blink%3ECSS%22>
*Web Feature ID*
container-queries <https://webstatus.dev/features/container-queries>
*MotivationCatching 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
<https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md>?*
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/comma-separated-skip-invalid.htmlhttps://wpt.fyi/css/css-conditional/container-queries/container-rule-cssom.html>
https://wpt.fyi/css/css-conditional/container-queries/container-rule-cssom.html
<https://wpt.fyi/css/css-conditional/container-queries/comma-separated-skip-invalid.htmlhttps://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
<https://chromestatus.com/>.
--
Rune Lillesveen
--
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 [email protected].
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.
