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-Anweisungsregel. Im Gegensatz zur CSSLayerBlockRule enthält sie keine anderen Regeln und definiert lediglich eine oder mehrere Ebenen, indem sie deren Namen angibt.

Diese Regel ermöglicht es, die Ordnung der Ebenen auf eine offensichtliche Weise am Anfang einer CSS-Datei explizit festzulegen: Die Schichtreihenfolge wird durch das Auftreten der Schichtnamen bestimmt. Das Deklarieren mit einer Anweisung ermöglicht es dem Leser, die Reihenfolge der Schichten zu verstehen. Es erlaubt auch, Inline- und importierte Schichten zu überlagern, was bei der Verwendung der CSSLayerBlockRule-Syntax nicht möglich ist.

CSSRule CSSLayerStatementRule

Instanz-Eigenschaften

Erbt auch Eigenschaften von seiner Elternschnittstelle, 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

BCD tables only load in the browser

Siehe auch