CSS @layer

Ever wanted to have more control over the Cascading order of your stylesheets? This new browser-wide feature makes is easier than ever.

Explanation

The @layer rule in CSS is a way to organize and manage different stylesheets into groups called "layers." Each layer is a separate unit, and you can control the order in which they are applied to your HTML elements.

Syntax

/* statement at-rules */
@layer layer-name;
@layer layer-name, layer-name, layer-name;

/* block at-rules */
@layer {rules}
@layer layer-name {rules}

layer-name

• Is the name of the cascade layer

rules

• Is the set of CSS rules in the cascade layer

Demo

If you look at the CSS order, despite declaring the non-layered style first it will still be applied after the layer styles.