CSS@layer Rule
Example
Use of anonymous layers (will follow the default cascading order - from top to bottom):
@layer {
body {
background: pink;
}
}
/* layer 2 */
@layer {
body {
background: lightblue; /* last layer wins */
}
}
More "Try it Yourself" examples below.
Definition and Usage
The CSS@layer rule can be used to control how the CSS cascade layers evaluates the order of styles.
This is done by first define a layer, then wrap it around the rulesets to be evaluated in a specific order.
A@layer can be defined with or without a name.
A@layer without a name, is called ananonymous layer. Anonymous layers are evaluated in the order they are declared (see example above). They follow the default cascading order (from top to bottom).
A@layer with a unique name, is called anamed layer. With named layers we can specify the exact cascading order we want (see example below). The order goes from least specific to most specific, from left to right.
Browser Support
The numbers in the table specifies the first browser version that fully supports the at-rule.
| At-rule | |||||
|---|---|---|---|---|---|
| @layer | 99 | 99 | 97 | 15.4 | 86 |
CSS Syntax
css declarations;
}
Property Values
| Value | Description |
|---|---|
| name | Optional. Defines a name for the cascade layer |
More Examples
Example
Use of named layers (and specify the exact cascading order we want):
@layer bgblue, bgpink;
/* layer 1 */
@layer bgpink {
body {
background: pink; /* wins */
}
}
/* layer 2 */
@layer bgblue {
body {
background: lightblue;
}
}
