Intent to Ship: Style Container Queries for CSS Custom Properties

463 views

Skip to first unread message

Rune Lillesveen

unread,

Dec 16, 2022, 5:13:28 AM12/16/22

to blink-dev

Summary

Adds a style() function to @container rules to make it possible to apply styles based on the computed values of custom properties of an ancestor element. style() queries can be combined with size container queries which shipped in M105.

Blink component

Blink>CSS

TAG review

https://github.com/w3ctag/design-reviews/issues/787

TAG review status

Pending

Risks

Interoperability and Compatibility

None of the other vendors have responded to the standards-positions or, to my knowledge, started implementing. There were concerns raised by an Apple engineer in https://github.com/w3c/csswg-drafts/issues/7185 mainly for standard property queries. This intent is for shipping support for custom property queries only.

Gecko: No signal (https://github.com/mozilla/standards-positions/issues/686)

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

Web developers: No signals

Other signals:

Activation

Feature detection is not very ergonomic before we add at-prelude testing to @supports, which requires a resolution for [1]. [1] https://github.com/w3c/csswg-drafts/issues/6966

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?

Debuggability

DevTools may need to show style containers like it is done with size container queries today. However, all elements are style containers by default, so probably not the same type of UI. There is an issue where we look up the wrong container, that is, always assume that the closest container supporting logical inline axis queries is the closest one: https://crbug.com/1378237 If we fix that issue, we will automatically also implement correct container lookup for pure style containers. That should work both for highlighting elements querying a given container, and also list the query for the matched style rule correctly.

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

Yes

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

Yes

Flag name

#enable-experimental-web-platform-features / CSSStyleQueries (Blink)

Requires code in //chrome?

False

Tracking bug

https://crbug.com/1302630

Sample links

https://www.bram.us/2022/10/14/container-queries-style-queries
https://una.im/style-queries

Estimated milestones

DevTrial on desktop

107

DevTrial on Android

107

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).

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5076875399921664

This intent message was generated by Chrome Platform Status.

Rune Lillesveen

Rick Byers

unread,

Dec 16, 2022, 3:11:23 PM12/16/22

to Rune Lillesveen, blink-dev

LGTM1

For other reviewers, I verified these tests are all passing 100% (thank you Rune!):

https://wpt.fyi/css/css-contain/container-queries/custom-property-style-queries.html https://wpt.fyi/css/css-contain/container-queries/custom-property-style-query-change.html https://wpt.fyi/css/css-contain/container-queries/at-container-parsing.html https://wpt.fyi/css/css-contain/container-queries/at-container-style-serialization.html

--
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 on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CACuPfeSQJOPtK%2BOmFj%2B7F%3DbCqqspoKshc7nDb0fh1BSoHmz95g%40mail.gmail.com.

Mike Taylor

unread,

Dec 16, 2022, 3:22:36 PM12/16/22

to Rick Byers, Rune Lillesveen, blink-dev

LGTM2

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAFUtAY99fxZDTbmkTYdZ7Z8p9F-UxoczLaGsZMvmP2J2p6mUBA%40mail.gmail.com.

Rune Lillesveen

unread,

Dec 19, 2022, 8:57:37 AM12/19/22

to Rick Byers, blink-dev

On Fri, Dec 16, 2022 at 9:11 PM Rick Byers <rby...@chromium.org> wrote:

LGTM1

For other reviewers, I verified these tests are all passing 100% (thank you Rune!):
https://wpt.fyi/css/css-contain/container-queries/custom-property-style-queries.html https://wpt.fyi/css/css-contain/container-queries/custom-property-style-query-change.html https://wpt.fyi/css/css-contain/container-queries/at-container-parsing.html https://wpt.fyi/css/css-contain/container-queries/at-container-style-serialization.html

Thanks, I did add the tests to "Web Platform Tests Description:", but the generated e-mail does not include that field. I've reported https://github.com/GoogleChrome/chromium-dashboard/issues/2591

Rune Lillesveen

unread,

Dec 19, 2022, 9:00:10 AM12/19/22

to blink-dev

On Fri, Dec 16, 2022 at 11:13 AM Rune Lillesveen <fut...@chromium.org> wrote:

Debuggability
DevTools may need to show style containers like it is done with size container queries today. However, all elements are style containers by default, so probably not the same type of UI. There is an issue where we look up the wrong container, that is, always assume that the closest container supporting logical inline axis queries is the closest one: https://crbug.com/1378237 If we fix that issue, we will automatically also implement correct container lookup for pure style containers. That should work both for highlighting elements querying a given container, and also list the query for the matched style rule correctly.

Update: https://crbug.com/1378237 is now fixed.

Rune Lillesveen

Manuel Rego Casasnovas

unread,

Dec 21, 2022, 11:45:56 AM12/21/22

to Rune Lillesveen, Rick Byers, blink-dev

LGTM3

On 19/12/2022 14:57, Rune Lillesveen wrote:
> On Fri, Dec 16, 2022 at 9:11 PM Rick Byers <rby...@chromium.org
> <mailto:rby...@chromium.org>> wrote:
>
> LGTM1
>
> For other reviewers, I verified these tests are all passing 100%
> (thank you Rune!):

>
>
> Thanks, I did add the tests to "Web Platform Tests Description:", but
> the generated e-mail does not include that field. I've reported
> https://github.com/GoogleChrome/chromium-dashboard/issues/2591
> <https://github.com/GoogleChrome/chromium-dashboard/issues/2591>
>
>
> On Fri, Dec 16, 2022 at 5:13 AM Rune Lillesveen
> <fut...@chromium.org <mailto:fut...@chromium.org>> wrote:
>
>
> Contact emails
>

> fut...@chromium.org <mailto:fut...@chromium.org>
>
>
> Explainer
>
> https://css.oddbird.net/rwd/style/explainer

> <https://css.oddbird.net/rwd/style/explainer>
>
>
> Specification
>
> https://drafts.csswg.org/css-contain-3/#style-container
> <https://drafts.csswg.org/css-contain-3/#style-container>
>
>
> Summary
>
> Adds a style() function to @container rules to make it possible
> to apply styles based on the computed values of custom
> properties of an ancestor element. style() queries can be
> combined with size container queries which shipped in M105.
>
>
>
> Blink component
>
> Blink>CSS

> <https://bugs.chromium.org/p/chromium/issues/list?q=component:Blink%3ECSS>
>
>
> TAG review
>
> https://github.com/w3ctag/design-reviews/issues/787

> <https://github.com/w3ctag/design-reviews/issues/787>
>
>
> TAG review status
>
> Pending
>
>
> Risks
>
>
>
> Interoperability and Compatibility
>
> None of the other vendors have responded to the
> standards-positions or, to my knowledge, started implementing.
> There were concerns raised by an Apple engineer in
> https://github.com/w3c/csswg-drafts/issues/7185
> <https://github.com/w3c/csswg-drafts/issues/7185> mainly for
> standard property queries. This intent is for shipping support
> for custom property queries only.
>
>
>

> /Gecko/: No signal
> (https://github.com/mozilla/standards-positions/issues/686
> <https://github.com/mozilla/standards-positions/issues/686>)
>
> /WebKit/: No signal
> (https://github.com/WebKit/standards-positions/issues/57
> <https://github.com/WebKit/standards-positions/issues/57>)
>
> /Web developers/: No signals
>
> /Other signals/:

>
>
> Activation
>
> Feature detection is not very ergonomic before we add at-prelude
> testing to @supports, which requires a resolution for [1]. [1]
> https://github.com/w3c/csswg-drafts/issues/6966
> <https://github.com/w3c/csswg-drafts/issues/6966>
>
>
>
> 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?
>
>
>
> Debuggability
>
> DevTools may need to show style containers like it is done with
> size container queries today. However, all elements are style
> containers by default, so probably not the same type of UI.
> There is an issue where we look up the wrong container, that is,
> always assume that the closest container supporting logical
> inline axis queries is the closest one:

> https://crbug.com/1378237 <https://crbug.com/1378237> If we fix

> that issue, we will automatically also implement correct
> container lookup for pure style containers. That should work
> both for highlighting elements querying a given container, and
> also list the query for the matched style rule correctly.
>
>
>
> Will this feature be supported on all six Blink
> platforms (Windows, Mac, Linux, Chrome OS, 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
>
>
> Flag name
>
> #enable-experimental-web-platform-features / CSSStyleQueries (Blink)
>
>
> Requires code in //chrome?
>
> False
>
>
> Tracking bug
>

> https://crbug.com/1302630 <https://crbug.com/1302630>
>
>
> Sample links
>
>
> https://www.bram.us/2022/10/14/container-queries-style-queries
> <https://www.bram.us/2022/10/14/container-queries-style-queries>
> https://una.im/style-queries <https://una.im/style-queries>

>
>
> Estimated milestones
>
> DevTrial on desktop 107
>
> DevTrial on Android 107
>
>
>
> 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).
>
>
>
> Link to entry on the Chrome Platform Status
>
> https://chromestatus.com/feature/5076875399921664
> <https://chromestatus.com/feature/5076875399921664>
>
> 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 blink-dev+...@chromium.org

> <mailto:blink-dev+...@chromium.org>.

> To view this discussion on the web visit

> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CACuPfeSQJOPtK%2BOmFj%2B7F%3DbCqqspoKshc7nDb0fh1BSoHmz95g%40mail.gmail.com <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CACuPfeSQJOPtK%2BOmFj%2B7F%3DbCqqspoKshc7nDb0fh1BSoHmz95g%40mail.gmail.com?utm_medium=email&utm_source=footer>.

>
>
>
> --
> 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 blink-dev+...@chromium.org

> <mailto:blink-dev+...@chromium.org>.

> To view this discussion on the web visit

> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CACuPfeQKoRPCvqftY0vZz6BaJR8Z_8RZUGz%2BSH796_fR5pA1HQ%40mail.gmail.com <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CACuPfeQKoRPCvqftY0vZz6BaJR8Z_8RZUGz%2BSH796_fR5pA1HQ%40mail.gmail.com?utm_medium=email&utm_source=footer>.

Reply all

Reply to author

Forward

0 new messages