CSS @layer rule

Definition and usage

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

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

@layer can be defined with or without a name.

without a name @layer is calledAnonymous layer. Anonymous layers are evaluated in the order of declaration (see the example below). They follow the default stacking order (from top to bottom).

with a unique name @layer is calledNamed layer. By using named layers, we can specify the exact stacking order required (see the example below). The order is from the least specific to the most specific, 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 represent the first browser version to fully support the @ rule.