CSS-nesting versoepelde syntaxisupdate

Lookahead-nesten is ingeschakeld in Chrome 120.

Adam Argyle

Eerder dit jaar heeft Chrome CSS-nesting in 112 uitgebracht, en het is nu in elke grote browser beschikbaar.

Browserondersteuning

• 120
• 120
• 117
• 17.2

Bron

Er was echter één strikte en potentieel onverwachte vereiste voor de syntaxis, vermeld in het eerste artikel van de ongeldige nestvoorbeelden . In dit vervolgartikel wordt besproken wat er is veranderd in de specificaties en in Chrome 120.

Tagnamen van nestelementen

Een van de meest verrassende beperkingen in de eerste release van CSS-nesting-syntaxis was het onvermogen om tag-namen van kale elementen te nesten. Dit onvermogen is verwijderd, waardoor de volgende CSS-nesting geldig is:

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

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

Dit wordt heel leuk bij het nesten van geordende, ongeordende of definitielijsten:

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

  dd {
    /* dl dd styles */
  }
}

Wat is er veranderd om dit nesten mogelijk te maken?

Het is grotendeels te danken aan wat onderzoek en prototypen door Chrome-ingenieurs, gecombineerd met de wens van de gemeenschap en de CSS-werkgroep.

Er was behoorlijk wat twijfel dat de CSS-parser kon worden geleerd onderscheid te maken tussen een tagnaam ( div ) en een eigenschapsnaam ( visibility ), aangezien de parser momenteel geen idee heeft van vooruitkijken. Om te begrijpen dat het token een eigenschap is, moet de browser vooruit kijken en kijken of een : het onbekende token volgt. Daarom werd in de oorspronkelijke specificaties het & -symbool gebruikt om aan de browser aan te geven dat wat volgt genest was, en niet een reguliere CSS-eigenschap en -waarde.

Gelukkig ontdekte een ingenieur dat wanneer de parser er niet in slaagde de geneste selector als een eigenschap te parseren volgens de normale verbruikspas, deze opnieuw kon worden opgestart in een modus waarin een selector werd aangenomen in plaats van een eigenschap. Het parseren wordt hervat, waarbij het nesten als selector-nesten wordt erkend. Het is snel genoeg en betrouwbaar genoeg om voldoende vast te stellen om de syntaxis vrij te geven.