CSSLayerBlockRule

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 CSSLayerBlockRule represents a @layer block rule.

Instance properties

Inherits properties from its ancestors CSSGroupingRule and CSSRule.

CSSLayerBlockRule.name Read only
- A string containing the name of the associated cascade layer.

Instance methods

Inherits methods from its ancestors CSSGroupingRule and CSSRule.

Examples

HTML

html

<p>I am displayed in <code>color: rebeccapurple</code>.</p>

CSS

css

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

JavaScript

const item = document.getElementsByTagName("p")[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 layer = rules[0]; // A CSSLayerBlockRule

item.textContent = `The CSSLayerBlockRule is for the "${layer.name}" layer`;

Result

Specifications

Specification
CSS Cascading and Inheritance Level 5 # csslayerblockrule

Browser compatibility

BCD tables only load in the browser