CSSLayerStatementRule: nameList property

Baseline 2022

Newly available

Since March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

BCD tables only load in the browser

See also