@layer
A powerful way to organize your CSS into 'layers' of priority. It allows you to ensure that certain styles (like a theme) always override others (like a reset), regardless of selector specificity.
Quick example
@layer reset, base, theme;
@layer theme {
/* These styles have higher priority because 'theme' is defined last */
button { background: blue; }
}
@layer reset {
button { background: gray; }
}@layer Browser Support
Widely available Since 2022 94% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2022.
Safe to use without fallbacks.
99+
97+
15.4+
99+