CSS @layer Rule
Example
Use of anonymous layers (will follow the default cascading order - from top to bottom):
/* layer 1 */
@layer {
body {
background:
pink;
}
}
/* layer 2 */
@layer {
body {
background: lightblue; /* last layer wins */
}
}
Try it Yourself »
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 an
anonymous 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 a
named 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
@layer name {
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):
/* secify exact cascading order */
@layer bgblue, bgpink;
/* layer
1 */
@layer bgpink {
body {
background:
pink; /* wins */
}
}
/* layer 2 */
@layer bgblue {
body {
background: lightblue;
}
}
Try it Yourself »
