@layer CSS At-Rule

Description

The CSS @layer at-rule is used to create a cascade layer and define the order of precedence in case of multiple cascade layers. This gives CSS authors more direct control over the cascade, so they can build more intentionally cascading systems without relying as much on heuristic assumptions that are tied to selection.

Cascade layers are a new feature in CSS, and they are not yet supported by all browsers. However, they are supported by all major browsers in their latest versions.

To use the @layer at-rule, you first need to declare your layers. This can be done at the top of your stylesheet, before the @import rule (but not between imports).

Syntax

@layer layer-name {rules}
@layer layer-name;
@layer layer-name, layer-name, layer-name;
@layer {rules}

Values

  • layer-nameIs the name of the cascade layer.
  • rulesIs the set of CSS rules in the cascade layer.

Example

@layer reset;

@layer theme {
body {
font-family: sans-serif;
}

h1 {
font-size: 2em;
}
}

@layer layout {
.container {
width: 960px;
margin: 0 auto;
}

.header {
margin-bottom: 1em;
}
}

@layer components {
.button {
display: inline-block;
padding: 0.5em 1em;
border: 1px solid #ccc;
border-radius: 0.25em;
background-color: #fff;
color: #333;
text-decoration: none;
}
}

Browser Support

The following table will show you the current browser support for the at-rule @layer.

Desktop
Edge Chrome Firefox Opera Safari
9999978515.4
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
99976815.41899

Last updated by CSSPortal on: 30th September 2023