Lookahead-Verschachtelung in Chrome 120 aktiviert.
Anfang dieses Jahres hat Chrome CSS-Verschachtelung in Version 112 eingeführt. Diese Funktion ist jetzt in allen gängigen Browsern verfügbar.
Es gab jedoch eine strenge und potenziell unerwartete Anforderung an die Syntax, die im ersten Artikel der Beispiele für ungültige Verschachtelungen aufgeführt ist. In diesem Folgeartikel erfahren Sie, was sich in den Spezifikationen und in Chrome 120 geändert hat.
Tag-Namen von Elementen verschachteln
Eine der überraschendsten Einschränkungen in der ersten Version der CSS-Verschachtelungssyntax bestand darin, dass Tag-Namen für Bare-Elemente nicht verschachtelt werden konnten. Diese Unfähigkeit wurde beseitigt, sodass die folgende CSS-Verschachtelung gültig ist:
.card {
h1 {
/* this is now valid! */
}
}
/* the same as */
.card {
& h1 {
/* this is now valid! */
}
}
Das wird besonders gut, wenn Sie geordnete, unsortierte oder Definitionslisten verschachteln möchten:
dl {
dt {
/* dl dt styles */
}
dd {
/* dl dd styles */
}
}
Was hat sich geändert, um diese Verschachtelung zu ermöglichen?
Dies ist größtenteils auf Recherchen und Prototyping durch Chrome-Entwickler zurückzuführen, die auch mit dem Wunsch der Community und der CSS Working Group kombiniert wurden.
Es besteht ein gewisser Zweifel daran, dass dem CSS-Parser beigebracht werden konnte, zwischen einem Tag-Namen (div) und einem Attributnamen (visibility) zu unterscheiden, da der Parser derzeit keine Vorgaben für die Zukunft hat. Um zu verstehen, dass das Token eine Eigenschaft ist, muss der Browser nach vorne suchen und prüfen, ob eine : dem unbekannten Token folgt. Daher wurde in der ursprünglichen Spezifikation das &-Symbol verwendet, um dem Browser anzuzeigen, dass das Folgende verschachtelt war und keine reguläre CSS-Eigenschaft und -Wert.
Glücklicherweise hat ein Entwickler festgestellt, dass, wenn der Parser den verschachtelten Selektor nicht gemäß der normalen Nutzungskarte als Attribut parsen konnte, in einem Modus neu gestartet werden konnte, bei dem ein Selektor anstelle eines Attributs angenommen wurde. Das Parsen wird fortgesetzt und die Verschachtelung wird als Selektorverschachtelung bestätigt. Sie ist so schnell und zuverlässig, dass sie ausreichend zuverlässig ist, um die Syntax freizugeben.