W3cubDocs

/Web APIs

CSSLayerBlockRule

Baseline: Widely supported

Baseline is determined by this web feature being supported on the current and the previous major versions of major 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

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
CSSLayerBlockRule 99 99 97 No 85 15.4 99 99 97 68 15.4 18.0
name 99 99 97 No 85 15.4 99 99 97 68 15.4 18.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CSSLayerBlockRule