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
- The statement declaration of an
@layer
is represented by aCSSLayerStatementRule
. - How to create named cascade layers in CSS.