@layer

/* statement at-rules */
@layer layer-name;
@layer layer-name, layer-name, layer-name;

/* block at-rules */
@layer {rules}
@layer layer-name {rules}

wobei:

layer-name

Der Name der Kaskadenschicht ist.

rules

Der Satz von CSS-Regeln in der Kaskadenschicht ist.

Regeln innerhalb einer Kaskadenschicht kaskadieren zusammen und geben Webentwicklern mehr Kontrolle über die Kaskade. Stile, die nicht in einer Schicht definiert sind, überschreiben immer Stile, die in benannten und anonymen Schichten deklariert sind.

Das folgende Diagramm zeigt Prioritäten von Schichten, wobei Schichten in der Reihenfolge 1, 2, ..., N deklariert werden.

Wie im obigen Diagramm dargestellt, haben wichtige Deklarationen, also Deklarationen mit dem !important-Flag, Vorrang vor normalen Deklarationen, oder regulären Deklarationen ohne das !important-Flag. Die Vorrangordnung unter wichtigen Regeln ist das Gegenteil der normalen Regeln. Übergänge haben den höchsten Vorrang. Als nächstes kommen die wichtigen Deklarationen von Benutzeragenten, wichtige Benutzerdireklarationen und wichtige Authorendeklarationen; in dieser Reihenfolge. Benutzer können Stile über Browsereinstellungen, Betriebssystemeinstellungen oder Browsererweiterungen angeben. Ihre wichtigen Deklarationen haben Vorrang vor den Autoren oder Webentwickler geschriebenen, wichtigen Deklarationen.

Innerhalb von Autorenstilen haben alle wichtigen Deklarationen innerhalb von CSS-Schichten Vorrang vor allen wichtigen Deklarationen, die außerhalb einer Schicht deklariert sind, während alle normalen Deklarationen innerhalb von CSS-Schichten eine niedrigere Priorität haben als Deklarationen, die außerhalb einer Schicht deklariert sind. Die Deklarationsreihenfolge ist wichtig. Die zuerst deklarierte Schicht erhält die niedrigste Priorität und die zuletzt deklarierte Schicht erhält die höchste Priorität. Jedoch ist die Priorität umgekehrt, wenn das !important-Flag verwendet wird.

Die @layer-At-Regel wird verwendet, um eine Kaskadenschicht auf eine der drei folgenden Arten zu erstellen.

Die erste Möglichkeit besteht darin, eine benannte Kaskadenschicht mit einem @layer-Block-At-Regel zu erstellen, wobei die CSS-Regeln für diese Schicht innerhalb gezeigt werden:

@layer utilities {
  .padding-sm {
    padding: 0.5rem;
  }

  .padding-lg {
    padding: 0.8rem;
  }
}

Die zweite Möglichkeit besteht darin, eine oder mehrere durch Kommas getrennte benannte Kaskadenschichten mit einer @layer-Anweisungs-At-Regel zu erstellen, ohne irgendwelche Stile zuzuweisen. Dies kann eine einzige Schicht sein, wie unten gezeigt:

@layer utilities;

Mehrere Schichten können auf einmal definiert werden, wie unten gezeigt:

@layer theme, layout, utilities;

Dies ist nützlich, da die anfängliche Reihenfolge, in der Schichten deklariert werden, angibt, welche Schicht Vorrang hat. Wie bei Deklarationen, gewinnt die zuletzt aufgelistete Schicht, wenn Deklarationen in mehreren Schichten gefunden werden. Daher würde im vorherigen Beispiel eine konkurrierende Regel in theme und utilities, die in utilities gewinnen und angewendet werden.

Eine Regel in utilities würde angewendet werden, auch wenn sie eine niedrigere Spezifität als die Regel in theme hat. Dies liegt daran, dass, sobald die Schichtreihenfolge festgelegt wurde, Spezifität und Erscheinungsreihenfolge ignoriert werden. Dies ermöglicht die Verwendung einfacherer CSS-Selektoren, da Sie nicht sicherstellen müssen, dass ein Selektor eine ausreichend hohe Spezifität hat, um konkurrierende Regeln zu überschreiben; alles, was Sie sicherstellen müssen, ist, dass es in einer späteren Schicht erscheint.

Die dritte Möglichkeit besteht darin, eine unbenannte Schicht mithilfe eines @layer-Block-At-Regel ohne Einbeziehung eines Schichtnamens zu erstellen. Beispiel:

@layer {
  p {
    margin-block: 1rem;
  }
}

Dies erzeugt eine anonyme Kaskadenschicht. Diese Schicht funktioniert auf die gleiche Weise wie benannte Schichten; jedoch können Regeln ihr später nicht zugewiesen werden. Die Vorrangordnung für anonyme Schichten ist die Reihenfolge, in der die Schichten deklariert werden, ob benannt oder nicht, und niedriger als die Stile, die außerhalb einer Schicht deklariert sind.

Eine weitere Möglichkeit, eine Kaskadenschicht zu erstellen, ist die Verwendung von @import. In diesem Fall würden sich die Regeln im importierten Stylesheet befinden. Denken Sie daran, dass die @import-At-Regel allen anderen Regeltypen vorausgehen muss, außer @charset und @layer-Regeln.

@import "theme.css" layer(utilities);

Schichten können verschachtelt sein. Zum Beispiel:

@layer framework {
  @layer layout {
  }
}

Um Regeln zur layout-Schicht innerhalb von framework hinzuzufügen, verbinden Sie die beiden Namen mit einem ..

@layer framework.layout {
  p {
    margin-block: 1rem;
  }
}

@layer = 
  @layer <layer-name>? { <rule-list> }  |
  @layer <layer-name># ;                

<layer-name> = 
  <ident> [ '.' <ident> ]*  

Im folgenden Beispiel werden zwei CSS-Regeln erstellt. Eine für das <p>-Element außerhalb jeder Schicht und eine innerhalb einer Schicht namens type für .box p.

Ohne Schichten hätte der Selektor .box p die höchste Spezifität, und daher würde der Text Hello, world! in Grün angezeigt. Da die type-Schicht vor der anonymen Schicht kommt, die nicht-Schicht-Inhalte hält, wird der Text Lila sein.

Beachten Sie auch die Reihenfolge. Auch wenn wir den nicht geschichteten Stil zuerst deklarieren, wird er nach den Schichtstilen trotzdem angewendet.

HTML

<div class="box">
  <p>Hello, world!</p>
</div>

CSS

p {
  color: rebeccapurple;
}

@layer type {
  .box p {
    font-weight: bold;
    font-size: 1.3em;
    color: green;
  }
}

Ergebnis

Im folgenden Beispiel werden zwei Schichten erstellt, denen zunächst keine Regeln zugeordnet sind, dann werden CSS-Regeln auf die zwei Schichten angewendet. Die base-Schicht definiert eine color, einen border, eine font-size und ein padding. Die special-Schicht definiert eine andere Farbe. Da special zuletzt kommt, wenn die Schichten definiert wurden, wird die von ihm bereitgestellte Farbe verwendet und der Text wird in rebeccapurple angezeigt. Alle anderen Regeln von base gelten weiterhin.

HTML

<div class="item">
  I am displayed in <code>color: rebeccapurple</code> because the
  <code>special</code> layer comes after the <code>base</code> layer. My green
  border, font-size, and padding come from the <code>base</code> layer.
</div>

CSS

@layer base, special;

@layer special {
  .item {
    color: rebeccapurple;
  }
}

@layer base {
  .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    padding: 0.5em;
  }
}

Ergebnis

• @import
• CSSLayerBlockRule
• CSSLayerStatementRule
• !important
• revert-layer
• Einführung in die CSS-Kaskade
• Kaskade, Spezifität und Vererbung
• Kaskadenschichten
• Die Zukunft von CSS: Kaskadenschichten auf bram.us (2021)