CSS @layer rule

Definition and usage

CSS @layer Rules can be used to control the order in which CSS cascade layers (cascade layers) evaluate styles.

This is achieved by first defining a layer and then wrapping the set of rules that need to be evaluated in a specific order within that layer.

@layer Can be defined with or without a name.

Without a name @layer CalledAnonymous layer. Anonymous layers are evaluated in the order of declaration (see the examples below). They follow the default stacking order (from top to bottom).

With a unique name @layer CalledNamed layer. By using named layers, we can specify the exact stacking order required (see the examples below). The order is from the least specific to the most specific, arranged from left to right.

Instance

Example 1

Use anonymous layers (they will follow the default stacking order - from top to bottom):

/* Layer 1 */
@layer {
  body {
    background: pink;
  }
}
/* Layer 2 */
@layer {
  body {
    background: lightblue; /* The last layer takes effect */
  }
}

Try it yourself

Example 2

Use named layers (and specify the exact stacking order required):

/* Specify the exact stacking order */
@layer bgblue, bgpink;
/* Layer 1 */
@layer bgpink {
  body {
    background: pink; /* Effective */
  }
}
/* Layer 2 */
@layer bgblue {
  body {
    background: lightblue;
  }
}

Try it yourself

CSS syntax

@layer name {
  CSS declarations;
}

Attribute value

Browser support

The numbers in the table indicate the first browser version that fully supports the @ rule.