While Cascade Origins help to balance styling concerns across stakeholders – layering browser defaults, user preferences, and document styles – it can be useful to have similar layering of concerns within a single origin. Author styles often start with browser normalization or resets, then layer in default typography, broad patterns (sometimes from design systems or frameworks), and more specific component styles.
Currently that layering has to be achieved with careful management of selector-specificity,
or over-use of !important
flags – both resulting in unwanted side-effects.
Cascade Layers would allow authors to define their own layering scheme
and avoid specificity or source-order conflicts across concerns.
My Notes ¶
Specification ¶
Issues ¶
Support ¶
- MDN documentation by Rachel Andrew
- Can I use…
- Web Platform Tests
(Cascade Layer tests all begin with the
layer-
prefix)
Implementation ¶
- Mozilla Layers
(
about:config
»layout.css.cascade-layers.enabled
) - Webkit Layers
(
Develop
/Experimental Features
»CSS Cascade Layers
) - Chromium Layers
(
chrome://flags/
»Enable CSS Cascade Layers
)
Talks & Podcasts ¶
- CSSWG Proposals
- Styling the Intrinsic Web (slides)
- Front End Nerdery
- Container Queries & The Future of CSS (slides)
- Syntax.fm
- Word Wrap Show
- The F-Word
- Smashing Podcast
Articles & Demos ¶
- OddBird Resources
- The Future of CSS: Cascade Layers (CSS @layer) by Bramus Van Damme
- Getting Started With CSS Cascade Layers by Stephanie Eckles
- Layers CodePen collection