W3cubDocs

/Web APIs

CSSImportRule: layerName property

Baseline: Widely supported

Baseline is determined by this web feature being supported on the current and the previous major versions of major browsers.

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 url("style1.css") layer(layer-1);
@import url("style2.css") layer;
@import url("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

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
layerName 99 99 97 No 85 15.4 99 99 97 68 15.4 18.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CSSImportRule/layerName