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.

Die CSSLayerStatementRule repräsentiert eine @layer-Anweisung. Im Gegensatz zur CSSLayerBlockRule enthält sie keine anderen Regeln und definiert lediglich einen oder mehrere Ebenen, indem sie deren Namen angibt.

Diese Regel ermöglicht es, die Ordnungsreihenfolge der Ebenen explizit am Anfang einer CSS-Datei zu deklarieren: Die Reihenfolge der Ebenen wird durch das erste Auftreten jedes Ebenennamens definiert. Eine Deklaration mittels einer Anweisung ermöglicht es dem Leser, die Ebenenreihenfolge zu verstehen. Sie erlaubt auch, dass inline- und importierte Ebenen ineinander verschachtelt werden können, was bei Verwendung der CSSLayerBlockRule-Syntax nicht möglich ist.

CSSRule CSSLayerStatementRule

Instanz-Eigenschaften

Erbt auch Eigenschaften von seiner übergeordneten Schnittstelle, CSSRule.

Beispiele

HTML

html
<p></p>

CSS

css
@layer layerName, layerName2;

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 CSSLayerStatementRule

item.textContent = `The CSS @layer statement declares the following layers: ${layer.nameList.join(
  ", ",
)}.`;

Ergebnis

Spezifikationen

Specification
CSS Cascading and Inheritance Level 5
# csslayerstatementrule

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
CSSLayerStatementRule
nameList

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch