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
An 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.getElementById("css-output").sheet.cssRules;
const layerStatementRule = rules[0]; // A CSSLayerStatementRule
const layerBlockRule = rules[1]; // A CSSLayerBlockRule; no nameList property.
item.textContent = `@layer declares the following layers: ${layerStatementRule.nameList.join(
", ",
)}.`;
Specifications
| Specification |
|---|
| CSS Cascading and Inheritance Level 5 # dom-csslayerstatementrule-namelist |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
nameList
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support