coderef

Cascade layersBaseline · Widely available

The @layer CSS at-rule avoids specificity conflicts by providing priority levels for different groups of CSS rules, such as low-priority styles like resets, and high-priority styles like UI components.

Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Mar 14, 2022. Widely available since Sep 14, 2024.

How to use ↓Compare browsers

Browser support

DesktopChrome
1–98Not supported
99+Supportedsince Mar 1, 2022
Current: 155
Edge
12–98Not supported
99+Supportedsince Mar 3, 2022
Current: 154
Firefox
1–96Not supported
97+Supportedsince Feb 8, 2022
Current: 157
Safari
1–15.3Not supported
15.4+Supportedsince Mar 14, 2022
Current: 27
MobileChrome Android
18–98Not supported
99+Supportedsince Mar 1, 2022
Current: 155
Firefox Android
4–96Not supported
97+Supportedsince Feb 8, 2022
Current: 157
Safari iOS
1–15.3Not supported
15.4+Supportedsince Mar 14, 2022
Current: 27

How to use

This feature is Baseline widely available — use it freely, no fallback needed.

Example

CSS
@layer reset, base, components, utilities;

@layer base {
  a { color: steelblue; }
}

@layer utilities {
  .text-red { color: red; } /* wins over earlier layers */
}

Feature detection

JS · check before using
if ("CSSLayerBlockRule" in globalThis) {
  // CSSLayerBlockRule is available
} else {
  // load a polyfill or use a fallback
}

Documentation (MDN)

Specification

Usage share

Sub-features

Support for each part of the feature (8). The overall table above shows when the whole feature works.

Sub-featureChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
CSSImportRule.layerName99999715.4999715.4
CSSLayerBlockRule99999715.4999715.4
CSSLayerBlockRule.name99999715.4999715.4
CSSLayerStatementRule99999715.4999715.4
CSSLayerStatementRule.nameList99999715.4999715.4
@import.layer99999715.4999715.4
@layer99999715.4999715.4
<global_keywords>.revert-layer99999715.4999715.4