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. It is a grouping at-rule meaning that it can contain other rules, and is associated to a given cascade layer, identified by its name.

CSSRule CSSGroupingRule CSSLayerBlockRule

Instance properties

Also inherits properties from its parent interface, CSSGroupingRule.

Instance methods

Inherits methods from its parent interface, CSSGroupingRule.

Examples

HTML

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

CSS

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

JavaScript

js
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

See also