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. On Tue, Dec 7, 2021 at 12:42 PM Xiaocheng Hu <[email protected]> wrote: > Contact [email protected] > > Explainer > https://gist.github.com/xiaochengh/58c793e3bf06a1bb0f7d472ebb170feb > > Specificationhttps://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 componentBlink>CSS > <https://bugs.chromium.org/p/chromium/issues/list?q=component:Blink%3ECSS> > > Search tagscss <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 reviewhttps://github.com/w3ctag/design-reviews/issues/597 > > TAG review statusIssues 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 > <https://chromium.googlesource.com/chromium/src/+/master/docs/testing/web_platform_tests.md> > ?Yes > > Flag namechrome://flags/#enable-cascade-layers > > Requires code in //chrome?False > > Tracking bughttps://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 discussionsIntent 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 > <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 [email protected]. To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAFqEGhY6X%2BJDHdRBDK5EWjHgirERd8v%2BK%2BMYL%3DiDKnDShf2dkw%40mail.gmail.com.
