Web platform features explorer - Cascade layers

Web platform features explorer

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.

Status

Baseline Widely Available (since 2024-09-14)

MDN documentation

@layer

Specifications

CSS Cascading and Inheritance Level 5, from Cascading Style Sheets (CSS) Working Group (W3C).

Browser support (view on caniuse.com)

Chrome 99 Released on 2022-03-01
Chrome Android 99 Released on 2022-03-01
Edge 99 Released on 2022-03-03
Firefox 97 Released on 2022-02-08
Firefox for Android 97 Released on 2022-02-08
Safari 15.4 Released on 2022-03-14
Safari on iOS 15.4 Released on 2022-03-14

Developer signals

State of CSS 2025: features/all_features question
State of CSS 2024: usage/favorite_new_features question
State of CSS 2024: usage/css_interoperability_features question
State of CSS 2024: features/all_features question

Usage (according to Chrome Platform Status)

~2.273% of page loads. More data at chromestatus.

Interop

Included in Interop 2022

Web Platform Tests (WPT)

View the latest WPT test results for this feature

View as JSON | Edit this feature | Report an issue | Web-features entry: source, dist