CSSLayerBlockRule: name 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 name property of the CSSLayerBlockRule interface represents the name of the associated cascade layer.

Value

A string containing the name of the layer, or "" if the layer is anonymous.

Examples

HTML

html
<output></output> <output></output>

CSS

css
output {
  display: block;
}

@layer special {
  div {
    color: rebeccapurple;
  }
}

@layer {
  div {
    color: black;
  }
}

JavaScript

js
const item1 = document.getElementsByTagName("output")[0];
const item2 = document.getElementsByTagName("output")[1];
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 layer = rules[1]; // A CSSLayerBlockRule
const anonymous = rules[2]; // An anonymous CSSLayerBlockRule

item1.textContent = `The first CSSLayerBlockRule defines the "${layer.name}" layer.`;
item2.textContent = `A second CSSLayerBlockRule defines a layer with the following name: "${anonymous.name}".`;

Result

Specifications

Specification
CSS Cascading and Inheritance Level 5
# dom-csslayerblockrule-name

Browser compatibility

BCD tables only load in the browser

See also