CSSLayerStatementRule: nameList 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 nameList property of the CSSLayerStatementRule interface return the list of associated cascade layer names. The names can't be modified.
Value
A Array of strings, each representing a cascade layer represented by the @layer statement rule.
Examples
HTML
html
<div></div>
CSS
css
@layer layerName, layerName2;
@layer layerName3 {
div {
font-family: serif;
}
}
JavaScript
js
const item = document.getElementsByTagName("div")[0];
const rules = document.styleSheets[1].cssRules;
// Note that stylesheet #1 is the stylesheet associated with this embedded example,
// while stylesheet #0 is the stylesheet associated with the whole MDN page
const layerStatementRule = rules[0]; // A CSSLayerStatementRule
const layerBlockRule = rules[1]; // A CSSLayerBlockRule; no nameList property.
item.textContent = `@layer declares the following layers: ${layer.nameList.join(
", ",
)}.`;
Specifications
| Specification |
|---|
| CSS Cascading and Inheritance Level 5 # dom-csslayerstatementrule-namelist |
Browser compatibility
Loading…