CSS-Verschachtelung – Aktualisierung der gelockerten Syntax

Die Verschachtelung von Lookaheads ist in Chrome 120 aktiviert.

Adam Argyle

Anfang des Jahres wurden 112 CSS-Verschachtelungen für Chrome veröffentlicht, die mittlerweile in allen gängigen Browsern verfügbar sind.

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 Folgeartikel erfahren Sie, was sich in der Spezifikation und im Vergleich zu Chrome 120 geändert hat.

Tag-Namen von Elementen verschachteln

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?

Dies ist vor allem auf die Erkundung und das Prototyping durch Chrome-Entwickler zurückzuführen, die auf den Wunsch der Community und der CSS Working Group kombiniert wurden.

Es gab einige Zweifel, dass der CSS-Parser beigebracht werden könnte, zwischen einem Tag-Namen (div) und einem Attributnamen (visibility) zu unterscheiden, da der Parser derzeit kein vorausschauendes Konzept hat. 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 anzuzeigen, dass das Folgende verschachtelt ist, und keine reguläre CSS-Eigenschaft und kein regulärer CSS-Wert.

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.