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.
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.
@layer rules will be surfaced to DevTools in the Style panel to indicate which layer the style rules are in. See crbug.com/1240596
99
Also some updates since the I2P:1. The 'revert-layer' keyword is now supported2. 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 <xiaoc...@chromium.org> wrote:Contact emails
xiaoc...@chromium.orgExplainer
https://gist.github.com/xiaochengh/58c793e3bf06a1bb0f7d472ebb170febSpecification
https://drafts.csswg.org/css-cascade-5/#layeringDesign docs
https://bit.ly/2SGjPluSummary
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>CSSSearch tags
css, cascade, layer, cascade-layerTAG review
https://github.com/w3ctag/design-reviews/issues/597TAG review status
Issues addressedRisks
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)
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 supported2. 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/5853That's great! Does the implementation also include tests to make sure that our CSS preload scanner is indeed picking up such rules?
--
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.
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.
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.
--
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.
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.
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.