CSS-Verschachtelung – Aktualisierung der gelockerten Syntax

Die Verschachtelung von Lookaheads ist in Chrome 120 aktiviert.

Adam Argyle

Anfang des Jahres wurde die CSS-Verschachtelung auf 112 jetzt in jedem gängigen Browser.

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

Tag-Namen von Elementen verschachteln

Eine der überraschendsten Einschränkungen der ersten Version der CSS-Verschachtelung Syntax war die Unfähigkeit, Element-Tag-Namen zu verschachteln. Diese Unfähigkeit hat entfernt. Dadurch wird die folgende CSS-Verschachtelung gültig:

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

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

Das ist besonders schön, wenn Sie geordnete, ungeordnete oder Definitionslisten verschachteln:

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

  dd {
    /* dl dd styles */
  }
}

Was hat sich geändert, um diese Verschachtelung zu ermöglichen?

Dies ist vor allem auf die Erkundung und das Prototyping durch Chrome-Entwickler zurückzuführen. kombiniert mit den Wünschen der Community und der Preisvergleichsportal-Arbeitsgruppe.

Es gab einige Zweifel darüber, ob der CSS-Parser beigebracht werden konnte, zwischen einem Tag-Namen (div) und einem Eigenschaftsnamen (visibility) unterscheiden, hat der Parser derzeit kein vorausschauendes Konzept. Um zu verstehen, dass die Token eine Eigenschaft ist, muss der Browser vorausschauen, um zu sehen, ob : folgt das unbekannte Token. Daher wurde in der ursprünglichen Spezifikation das Symbol & verwendet, um den Browser darauf hinzuweisen, dass das Folgende verschachtelt ist und kein regulärer CSS-Code und einen Wert haben.

Glücklicherweise entdeckte ein Techniker, dass, wenn der Parser die verschachtelten Selektors als Eigenschaft gemäß normalem Verbrauchsticket, in einem Modus neu gestartet, in dem ein Selector anstelle einer Eigenschaft angenommen wurde. Parsen wird fortgesetzt, wobei die Verschachtelung als Selektor-Verschachtelung bestätigt wird. Es ist schnell genug und zuverlässig genug ermittelt wurde, um die Syntax freizugeben.