This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.
The layer() CSS function is used along with the @import at-rule to put the imported resource in a separate named cascade layer.
@import url layer(layer-name); @import "dark.css" layer(framework.themes.dark);
The framework.themes.dark is the layer into which the CSS file would be imported.
layer() =
layer( <layer-name> )
<layer-name> =
<ident> [ '.' <ident> ]*
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | WebView Android | WebView on iOS | |
layer_function |
99 | 99 | 97 | 85 | 15.4 | 99 | 97 | 68 | 15.4 | 18.0 | 99 | 15.4 |
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/@import/layer_function