@layer CSS At-Rule

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

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