Intent to Ship: CSS cascade layers

Xiaocheng Hu

unread,

Dec 7, 2021, 3:42:57 PM12/7/21

to blink-dev

Summary

CSS cascade layers (@layer rule and layered @import syntax) provide a structured way to organize and balance concerns within a single origin. Rules within a single cascade layer cascade together without interleaving with style rules outside the layer. This allows authors to achieve a certain cascade ordering for same-origin rules in a proper way.

Blink component

Blink>CSS

Search tags

css, cascade, layer, cascade-layer

TAG review

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

TAG review status

Issues addressed

Risks

Interoperability and Compatibility

As a new feature, there is no compatibility risk. Interoperability risk is very low as WebKit and Gecko are also actively developing this new feature.

Gecko: In development (https://bugzilla.mozilla.org/show_bug.cgi?id=1699215)

WebKit: Shipped/Shipping (https://bugs.webkit.org/show_bug.cgi?id=220779)

Web developers: Strongly positive (https://bugs.chromium.org/p/chromium/issues/detail?id=1095765)

Other signals:

Debuggability

@layer rules will be surfaced to DevTools in the Style panel to indicate which layer the style rules are in. See crbug.com/1240596

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

Yes

Flag name

chrome://flags/#enable-cascade-layers

Requires code in //chrome?

False

Tracking bug

https://bugs.chromium.org/p/chromium/issues/detail?id=1095765

Estimated milestones

99

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5663362835808256

Links to previous Intent discussions

Intent to prototype: https://groups.google.com/a/chromium.org/g/blink-dev/c/chiJ2GIECPc/m/sIF9pfsdAAAJ

This intent message was generated by Chrome Platform Status.

Xiaocheng Hu

unread,

Dec 7, 2021, 3:49:42 PM12/7/21

to blink-dev

Also some updates since the I2P:

1. The 'revert-layer' keyword is now supported

2. Regarding concerns of loading performance when importing external stylesheets into a layer, it's recommended to inline the @import rule in a <style> element, so that the preload scanner can pick it up. This should achieve a similar loading performance as <link rel=stylesheet>. The CSSWG is also working on allowing specifying a layer in <link rel=stylesheet>: https://github.com/w3c/csswg-drafts/issues/5853

3. There's a known bug (https://crbug.com/1277637) in an edge case. The Blink style team thinks it doesn't block shipping.

Yoav Weiss

unread,

Dec 7, 2021, 5:33:06 PM12/7/21

to blink-dev, Xiaocheng Hu, blink-dev

On Tuesday, December 7, 2021 at 9:49:42 PM UTC+1 Xiaocheng Hu wrote:

Also some updates since the I2P:

1. The 'revert-layer' keyword is now supported

2. Regarding concerns of loading performance when importing external stylesheets into a layer, it's recommended to inline the @import rule in a <style> element, so that the preload scanner can pick it up. This should achieve a similar loading performance as <link rel=stylesheet>. The CSSWG is also working on allowing specifying a layer in <link rel=stylesheet>: https://github.com/w3c/csswg-drafts/issues/5853

That's great! Does the implementation also include tests to make sure that our CSS preload scanner is indeed picking up such rules?

3. There's a known bug (https://crbug.com/1277637) in an edge case. The Blink style team thinks it doesn't block shipping.

On Tue, Dec 7, 2021 at 12:42 PM Xiaocheng Hu <xiaoc...@chromium.org> wrote:
Contact emails
xiaoc...@chromium.org

Explainer
https://gist.github.com/xiaochengh/58c793e3bf06a1bb0f7d472ebb170feb

Specification
https://drafts.csswg.org/css-cascade-5/#layering

Design docs

https://bit.ly/2SGjPlu

Summary
CSS cascade layers (@layer rule and layered @import syntax) provide a structured way to organize and balance concerns within a single origin. Rules within a single cascade layer cascade together without interleaving with style rules outside the layer. This allows authors to achieve a certain cascade ordering for same-origin rules in a proper way.

Blink component
Blink>CSS

Search tags
css, cascade, layer, cascade-layer

TAG review
https://github.com/w3ctag/design-reviews/issues/597

TAG review status
Issues addressed

Risks

Interoperability and Compatibility
As a new feature, there is no compatibility risk. Interoperability risk is very low as WebKit and Gecko are also actively developing this new feature.

Gecko: In development (https://bugzilla.mozilla.org/show_bug.cgi?id=1699215)

Can you file for a position? I agree that the bug seems active, but Mozilla has been clear in the past that open issues should not be considered as implicit support.

Xiaocheng Hu

unread,

Dec 7, 2021, 5:53:26 PM12/7/21

to Yoav Weiss, blink-dev, Xiaocheng Hu

On Tue, Dec 7, 2021 at 2:33 PM Yoav Weiss <yoav...@chromium.org> wrote:

On Tuesday, December 7, 2021 at 9:49:42 PM UTC+1 Xiaocheng Hu wrote:
Also some updates since the I2P:

1. The 'revert-layer' keyword is now supported

2. Regarding concerns of loading performance when importing external stylesheets into a layer, it's recommended to inline the @import rule in a <style> element, so that the preload scanner can pick it up. This should achieve a similar loading performance as <link rel=stylesheet>. The CSSWG is also working on allowing specifying a layer in <link rel=stylesheet>: https://github.com/w3c/csswg-drafts/issues/5853

That's great! Does the implementation also include tests to make sure that our CSS preload scanner is indeed picking up such rules?

I'll add a test.

Here it is: https://mozilla.github.io/standards-positions/#css-cascade-layers

And it's already available in Firefox Nightly as I just tested.

Philip Jägenstedt

unread,

Dec 8, 2021, 11:44:57 AM12/8/21

to Xiaocheng Hu, Yoav Weiss, blink-dev

Hi Xiaocheng,

Can you identify the tests in https://wpt.fyi/results/css/css-cascade?label=master&label=experimental&product=chrome&product=firefox&product=safari&aligned that are for cascade layers? I think revert-layer-*.html are relevant to this intent, but is failing in Chrome Dev. Is this because it was fixed so recently? Do you expect all of the tests to be passing in Chrome Dev once it's updated?

Best regards,

Philip

--
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/CAFqEGhY7e9KfmY7OdsqzQin0Bw%2BmSk9noMAvqizOEL_2TqvGEA%40mail.gmail.com.

Xiaocheng Hu

unread,

Dec 8, 2021, 12:49:05 PM12/8/21

to Philip Jägenstedt, Xiaocheng Hu, Yoav Weiss, blink-dev

The relevant tests are css/css-cascade/layer-*.html and css/css-cascade/revert-layer-*.html

They are failing on wpt.fyi because the feature is not enabled there. The feature is not behind the "experimental web platform features" flag.

All tests (except https://crbug.com/1277637) are currently passing on CQ (for example, https://ci.chromium.org/ui/p/chromium/builders/try/linux-rel/873658/).

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

Emilio Cobos Álvarez

unread,

Dec 9, 2021, 10:37:24 AM12/9/21

to blin...@chromium.org

I would love if we could at least get:

https://github.com/w3c/csswg-drafts/issues/6872

clarified and resolved. The behavior Chromium currently implements might
be what we want to end up doing, but that doesn't match the spec at all,
afaict.

-- Emilio

On 12/7/21 21:42, Xiaocheng Hu wrote:
>
> Contact emails
>
> xiaoc...@chromium.org <mailto:xiaoc...@chromium.org>
>
>
> Explainer
>
> https://gist.github.com/xiaochengh/58c793e3bf06a1bb0f7d472ebb170feb

> <https://gist.github.com/xiaochengh/58c793e3bf06a1bb0f7d472ebb170feb>
>
>
> Specification
>
> https://drafts.csswg.org/css-cascade-5/#layering
> <https://drafts.csswg.org/css-cascade-5/#layering>
>
>
> Design docs
>
>

> https://bit.ly/2SGjPlu <https://bit.ly/2SGjPlu>

>
>
> Summary
>
> CSS cascade layers (@layer rule and layered @import syntax) provide a
> structured way to organize and balance concerns within a single origin.
> Rules within a single cascade layer cascade together without
> interleaving with style rules outside the layer. This allows authors to
> achieve a certain cascade ordering for same-origin rules in a proper way.
>
>
>
> Blink component
>
> Blink>CSS

> <https://bugs.chromium.org/p/chromium/issues/list?q=component:Blink%3ECSS>
>
>
> Search tags
>
> css <https://chromestatus.com/features#tags:css>, cascade
> <https://chromestatus.com/features#tags:cascade>, layer
> <https://chromestatus.com/features#tags:layer>, cascade-layer
> <https://chromestatus.com/features#tags:cascade-layer>

>
>
> TAG review
>
> https://github.com/w3ctag/design-reviews/issues/597
> <https://github.com/w3ctag/design-reviews/issues/597>
>
>
> TAG review status
>
> Issues addressed
>
>
> Risks
>
>
>
> Interoperability and Compatibility
>
> As a new feature, there is no compatibility risk. Interoperability risk
> is very low as WebKit and Gecko are also actively developing this new
> feature.
>
>
>
> Gecko: In development
> (https://bugzilla.mozilla.org/show_bug.cgi?id=1699215

> <https://bugzilla.mozilla.org/show_bug.cgi?id=1699215>)
>
> WebKit: Shipped/Shipping (https://bugs.webkit.org/show_bug.cgi?id=220779
> <https://bugs.webkit.org/show_bug.cgi?id=220779>)

>
> Web developers: Strongly positive
> (https://bugs.chromium.org/p/chromium/issues/detail?id=1095765

> <https://bugs.chromium.org/p/chromium/issues/detail?id=1095765>)

>
> Other signals:
>
>
> Debuggability
>
> @layer rules will be surfaced to DevTools in the Style panel to indicate
> which layer the style rules are in. See crbug.com/1240596

> <http://crbug.com/1240596>

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

> <https://chromium.googlesource.com/chromium/src/+/master/docs/testing/web_platform_tests.md>?

>
> Yes
>
>
> Flag name
>
> chrome://flags/#enable-cascade-layers
>
>
> Requires code in //chrome?
>
> False
>
>
> Tracking bug
>
> https://bugs.chromium.org/p/chromium/issues/detail?id=1095765
> <https://bugs.chromium.org/p/chromium/issues/detail?id=1095765>
>
>
> Estimated milestones
>
> 99
>
>
>
> Link to entry on the Chrome Platform Status
>
> https://chromestatus.com/feature/5663362835808256
> <https://chromestatus.com/feature/5663362835808256>
>
>
> Links to previous Intent discussions
>
> Intent to prototype:

> https://groups.google.com/a/chromium.org/g/blink-dev/c/chiJ2GIECPc/m/sIF9pfsdAAAJ <https://groups.google.com/a/chromium.org/g/blink-dev/c/chiJ2GIECPc/m/sIF9pfsdAAAJ>

>
>
> This intent message was generated by Chrome Platform Status

> <https://www.chromestatus.com/>.

>
> --
> 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/CAFqEGha5qBJvcSa%2Bzs525XU8HBdpHhH1W3%3D9x%3DNrHnaSP6XTvg%40mail.gmail.com <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAFqEGha5qBJvcSa%2Bzs525XU8HBdpHhH1W3%3D9x%3DNrHnaSP6XTvg%40mail.gmail.com?utm_medium=email&utm_source=footer>.

Xiaocheng Hu

unread,

Dec 9, 2021, 4:43:44 PM12/9/21

to Emilio Cobos Álvarez, blin...@chromium.org

Updates:

- Ensured that preload scanner picks up layered @import rules in <style> elements, with tests added (crrev.com/c/3321438)

- I've also filed a WebKit issue for it (https://bugs.webkit.org/show_bug.cgi?id=234094)

- https://github.com/w3c/csswg-drafts/issues/6872 has been addressed and closed

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/15733bbb-2514-381a-35ee-b6a8a79f48e9%40mozilla.com.

Manuel Rego Casasnovas

unread,

Dec 9, 2021, 5:59:13 PM12/9/21

to Xiaocheng Hu, Philip Jägenstedt, Yoav Weiss, blink-dev

On 08/12/2021 18:48, Xiaocheng Hu wrote:
> They are failing on wpt.fyi because the feature is not enabled there.
> The feature is not behind the "experimental web platform features" flag.

Isn't a bit strange to move a runtime feature from "test" to "stable",
without having been in "experimental" for a while?
Maybe it'd be nice to maybe mark it as "experimental" and see lots of
green tests in wpt.fyi.

It looks interoperability is not great yet, as Firefox and Safari fail a
bunch of tests here and there. It would be nice if we could fill bugs
(if they haven't been filled yet) for some of the biggest interop issues
we think web authors will find.

Cheers,
Rego

Xiaocheng Hu

unread,

Dec 10, 2021, 11:58:31 PM12/10/21

to Manuel Rego Casasnovas, Xiaocheng Hu, Philip Jägenstedt, Yoav Weiss, blink-dev

It's flipped to "experimental" in 99.0.4759.0. We should see all the tests (except crbug.com/1277637) turn green soon.

It also appears that the test failures are properly tracked at Gecko and WebKit, detailed as below:

For Gecko, the failures are already tracked by:

- 'revert-layer' keyword: https://bugzilla.mozilla.org/show_bug.cgi?id=1699220

- Remaing failures already have tracking bugs as shown by wpt.fyi

For WebKit, their failing tests are:

- Those testing interactions with certain at-rules (@counter-style, @property, @scroll-timeline) that they don't support yet.

- CSSOM API-related, which they fixed recently (https://trac.webkit.org/changeset/286657/webkit). Should turn green in wpt.fyi soon

- The remaining failures are already tracked by https://bugs.webkit.org/show_bug.cgi?id=233937, https://bugs.webkit.org/show_bug.cgi?id=233944 and https://bugs.webkit.org/show_bug.cgi?id=234158

Yoav Weiss

unread,

Dec 13, 2021, 1:47:37 AM12/13/21

to Xiaocheng Hu, Manuel Rego Casasnovas, Philip Jägenstedt, blink-dev

LGTM1

Thanks for fixing the related CSSPreloadScanner issues! :)

--

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/CAFqEGhZ%2BbXqgPQsSOc%2B4vEhTm1Rck%2BZ5CQ8n2nJXzeKUOKsTxA%40mail.gmail.com.

Chris Harrelson

unread,

Dec 13, 2021, 12:45:20 PM12/13/21

to Yoav Weiss, Xiaocheng Hu, Manuel Rego Casasnovas, Philip Jägenstedt, blink-dev

LGTM2

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAL5BFfUrsF%2Bvs2VZwtLXcJaZZQ8F8ek%3DJZ5k3srv_U5CF9q05w%40mail.gmail.com.

Mike Taylor

unread,

Dec 13, 2021, 12:56:00 PM12/13/21

to Chris Harrelson, Yoav Weiss, Xiaocheng Hu, Manuel Rego Casasnovas, Philip Jägenstedt, blink-dev

LGTM3 - I'm excited for this addition to CSS.

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

Xiaocheng Hu

unread,

Dec 13, 2021, 8:49:36 PM12/13/21

to Mike Taylor, Chris Harrelson, Yoav Weiss, Xiaocheng Hu, Manuel Rego Casasnovas, Philip Jägenstedt, blink-dev

Thanks to everyone for reviewing!

The feature has been enabled by default in M99: https://chromium-review.googlesource.com/c/chromium/src/+/3335171

Reply all

Reply to author

Forward