CSSImportRule: layerName property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

The read-only layerName property of the CSSImportRule interface returns the name of the cascade layer created by the @import at-rule.

If the created layer is anonymous, the string is empty (""), if no layer has been created, it is the null object.

Value

A string, that can be empty, or the null object.

Examples

The document's single stylesheet contains three @import rules. The first declaration imports a stylesheet into a named layer. The second declaration imports a stylesheet into an anonymous layer. The third declaration imports a stylesheet without a layer declaration.

The layerName property returns the name of the layer associated with the imported stylesheet.

css
@import "style1.css" layer(layer-1);
@import "style2.css" layer;
@import "style3.css";
js
const myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].layerName); // returns `"layer-1"`
console.log(myRules[1].layerName); // returns `""` (an anonymous layer)
console.log(myRules[2].layerName); // returns `null`

Specifications

Specification
CSS Object Model (CSSOM)
# dom-cssimportrule-layername

Browser compatibility

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
layerName
Chrome – Full support
Chrome 99 (Release date: 2022-03-01)
footnote Full support
Edge – Full support
Edge 99 (Release date: 2022-03-03)
footnote Full support
Firefox – Full support
Firefox 97 (Release date: 2022-02-08)
footnote Full support
Opera – Full support
Opera 85 (Release date: 2022-03-23)
footnote Full support
Safari – Full support
Safari 15.4 (Release date: 2022-03-14)
footnote Full support
Chrome Android – Full support
Chrome Android 99 (Release date: 2022-03-01)
footnote Full support
Firefox for Android – Full support
Firefox for Android 97 (Release date: 2022-02-08)
footnote Full support
Opera Android – Full support
Opera Android 68 (Release date: 2022-03-30)
footnote Full support
Safari on iOS – Full support
Safari on iOS 15.4 (Release date: 2022-03-14)
footnote Full support
Samsung Internet – Full support
Samsung Internet 18 (Release date: 2022-08-08)
footnote Full support
WebView Android – Full support
WebView Android 99 (Release date: 2022-03-01)
footnote Full support
WebView on iOS – Full support
WebView on iOS 15.4 (Release date: 2022-03-14)
footnote Full support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also