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.
On this page
CSSLayerBlockRule
Baseline: Widely supported
Baseline is determined by this web feature being supported on the current and the previous major versions of major browsers.
Instance properties
Also inherits properties from its parent interface, CSSGroupingRule
.
CSSLayerBlockRule.name
Read only- A string containing the name of the associated cascade layer.
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