W3cubDocs

/Web APIs

CSSLayerStatementRule

Baseline: Widely supported

Baseline is determined by this web feature being supported on the current and the previous major versions of major browsers.

Learn more
See full compatibility

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.nameList Read only
- An array of strings, that represent the name of each cascade layer by the rule

Examples

HTML

html

<p></p>

CSS

css

@layer layerName, layerName2;

JavaScript

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 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
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`CSSLayerStatementRule`	99	99	97	No	85	15.4	99	99	97	68	15.4	18.0
`nameList`	99	99	97	No	85	15.4	99	99	97	68	15.4	18.0