Cascade layers
The layer() CSS function is used along with the @import at-rule to put the imported resource in a separate named cascade layer.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 99 | 99 | 97 | 15.4 | 99 | 15.4 | |
| DOM API | ||||||
| The read-only layerName property of the CSSImportRule interface returns the name of the cascade layer created by the @import at-rule. | 99 | 99 | 97 | 15.4 | 99 | 15.4 |
| The CSSLayerBlockRule represents a @layer block rule. | 99 | 99 | 97 | 15.4 | 99 | 15.4 |
| The read-only name property of the CSSLayerBlockRule interface represents the name of the associated cascade layer. | 99 | 99 | 97 | 15.4 | 99 | 15.4 |
| The CSSLayerStatementRule represents a @layer statement rule. Unlike CSSLayerBlockRule, it doesn't contain other rules and merely defines one or several layers by providing their names. | 99 | 99 | 97 | 15.4 | 99 | 15.4 |
| The read-only nameList property of the CSSLayerStatementRule interface return the list of associated cascade layer names. The names can't be modified. | 99 | 99 | 97 | 15.4 | 99 | 15.4 |
| CSS at-rule | ||||||
| The layer() CSS function is used along with the @import at-rule to put the imported resource in a separate named cascade layer. | 99 | 99 | 97 | 15.4 | 99 | 15.4 |
| CSS type | ||||||
| The revert-layer CSS-wide keyword rolls back the value of a property in a cascade layer to the value of the property in a CSS rule matching the element in a previous cascade layer. The value of a property with this keyword is recalculated as if no rules were specified on the target element in the current cascade layer. | 99 | 99 | 97 | 15.4 | 99 | 15.4 |
Syntax
/* Declare layer priorities */
@layer reset, base, components, utilities;
@layer reset {
* { margin: 0; padding: 0; box-sizing: border-box; }
}
@layer base {
body { font-family: system-ui, sans-serif; line-height: 1.6; }
a { color: var(--color-primary); }
}
@layer components {
.btn { padding: 8px 16px; border-radius: 6px; }
.card { padding: 1rem; border: 1px solid #e5e7eb; }
}
@layer utilities {
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
}Live demo
Use cases
-
Using Cascade layers
The layer() CSS function is used along with the @import at-rule to put the imported resource in a separate named cascade layer.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.