Mise à jour de la syntaxe souple de l'imbrication CSS

L'imbrication de Lookahead est activée dans Chrome 120.

Adam Argyle

Plus tôt cette année, Chrome a publié le imbrication CSS dans la version 112. Elle est désormais disponible dans tous les principaux navigateurs.

Toutefois, une exigence stricte et potentiellement inattendue s'applique à la syntaxe, comme indiqué dans le premier article des exemples d'imbrication non valides. Cet article de suivi couvre les modifications apportées aux spécifications et à Chrome 120.

Noms des balises d'élément imbriqué

L'une des limites les plus surprenantes de la première version de la syntaxe d'imbrication CSS était l'impossibilité d'imbriquer les noms de balises d'éléments nu. Cette incapacité a été supprimée, ce qui rend l'imbrication CSS suivante valide :

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

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

Cela devient très pratique lorsque vous imbriquez des listes ordonnées, non ordonnées ou de définition:

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

  dd {
    /* dl dd styles */
  }
}

Qu'est-ce qui a changé pour autoriser cette imbrication ?

C'est en grande partie le fruit des efforts d'exploration et de prototypage des ingénieurs Chrome, combinés à la volonté de la communauté et du groupe de travail CSS.

Il y avait un doute raisonnable quant à la possibilité d'apprendre à l'analyseur CSS à différencier un nom de balise (div) d'un nom de propriété (visibility), car l'analyseur n'a actuellement aucun concept d'anticipation. Pour comprendre que le jeton est une propriété, le navigateur doit regarder vers l'avenir et voir si un : suit le jeton inconnu. Par conséquent, dans la spécification d'origine, le symbole & était utilisé pour indiquer au navigateur que ce qui suit était imbriqué, et non une propriété et une valeur CSS standard.

Heureusement, un ingénieur a découvert que lorsque l'analyseur n'a pas réussi à analyser le sélecteur imbriqué en tant que propriété conformément à la passe de consommation normale, il pouvait être redémarré dans un mode qui suppose un sélecteur plutôt qu'une propriété. L'analyse reprend, en reconnaissant l'imbrication comme imbrication de sélecteur. Il est suffisamment rapide et fiable pour être suffisamment déterminé pour libérer la syntaxe.