CSSLayerStatementRule
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.
The CSSLayerStatementRule represents a @layer statement rule. Unlike CSSLayerBlockRule, it doesn't contain other rules and merely defines one or several layers by providing their names.
This rule allows to explicitly declare the ordering layer that is in an apparent way at the beginning of a CSS file: the layer order is defined by the order of first occurrence of each layer name. Declaring them with a statement allows the reader to understand the layer order. It also allows inline and imported layers to be interleaved, which is not possible when using the CSSLayerBlockRule syntax.
Instance properties
Also inherits properties from its parent interface, CSSRule.
CSSLayerStatementRule.nameListRead only- An array of strings, that represent the name of each cascade layer by the rule
Examples
HTML
<p></p>
CSS
@layer layerName, layerName2;
JavaScript
const item = document.getElementsByTagName("p")[0];
const rules = document.getElementById("css-output").sheet.cssRules;
const layer = rules[0]; // A CSSLayerStatementRule
item.textContent = `The CSS @layer statement declares the following layers: ${layer.nameList.join(
", ",
)}.`;
Result
Specifications
| Specification |
|---|
| CSS Cascading and Inheritance Level 5 # csslayerstatementrule |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
CSSLayerStatementRule
|
|
|
|
|
|
|
|
|
|
|
|
|
nameList
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support