CSS-Verschachtelung – Aktualisierung der gelockerten Syntax

Vorschau-Verschachtelung in Chrome 120 aktiviert

Adam Argyle

Anfang des Jahres wurde in Chrome 112 die CSS-Verschachtelung eingeführt. Sie ist jetzt in allen gängigen Browsern verfügbar.

Unterstützte Browser

• 120
• 120
• 117
• 17.2

Quelle

Es gab jedoch eine strenge und potenziell unerwartete Anforderung an die Syntax, die im ersten Artikel der Beispiele für ungültige Verschachtelung aufgeführt ist. In diesem Artikel erfahren Sie, was sich in der Spezifikation und in Chrome 120 geändert hat.

Namen von verschachtelten Element-Tags

Eine der überraschendsten Einschränkungen der ersten Version der CSS-Verschachtelungssyntax war die Unmöglichkeit, Tagnamen ohne Element einzuschachteln. Diese Einschränkung wurde aufgehoben, sodass die folgende CSS-Verschachtelung gültig ist:

.card {
  h1 {
    /* this is now valid! */
  }
}

/* the same as */
.card {
  & h1 {
    /* this is now valid! */
  }
}

Das ist besonders praktisch, wenn Sie benutzerdefinierte Listen, Aufzählungslisten oder Definitionen verschachteln:

dl {
  dt {
    /* dl dt styles */
  }

  dd {
    /* dl dd styles */
  }
}

Was hat sich geändert, damit diese Verschachtelung möglich ist?

Das liegt vor allem an den explorativen Tests und Prototypen der Chrome-Entwickler sowie am Wunsch der Community und der CSS-Arbeitsgruppe.

Es gab einige Zweifel, ob der CSS-Parser dazu gebracht werden kann, zwischen einem Tagnamen (div) und einem Attributnamen (visibility) zu unterscheiden, da der Parser derzeit nicht in der Lage ist, vorauszuschauen. Damit der Browser erkennt, dass das Token ein Attribut ist, muss er nachsehen, ob auf das unbekannte Token ein : folgt. Daher wurde in der ursprünglichen Spezifikation das Symbol & verwendet, um dem Browser zu signalisieren, dass das Folgende verschachtelt ist und sich nicht um eine reguläre CSS-Eigenschaft und einen regulären CSS-Wert handelt.

Glücklicherweise stellte ein Entwickler fest, dass der Parser, wenn er die verschachtelte Auswahl nicht wie bei einem normalen Verbrauchsprozess als Property parsen konnte, in einem Modus neu gestartet werden konnte, der eine Auswahl anstelle einer Property vorsah. Lebensläufe werden geparst und die Verschachtelung als Selektorverschachtelung berücksichtigt. Sie ist schnell und zuverlässig genug, um die Syntax freizugeben.