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 lancé l'imbrication des CSS en 112, dans les principaux navigateurs.

Cependant, il y avait une exigence stricte et potentiellement inattendue au d'imbrication, répertoriée dans le premier article des exemples d'imbrication non valide. Cet article de suivi présente 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 l'imbrication CSS était l'impossibilité d'imbriquer des noms de tags d'éléments simples. Cette incapacité supprimé, rendant ainsi valide l'imbrication CSS suivante:

.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 grâce à l'exploration et au prototypage par les ingénieurs Chrome, conjointement à la volonté de la communauté et du groupe de travail CSS.

Nous avons eu beaucoup de doute quant au fait que l'analyseur CSS pouvait apprendre différencier un nom de balise (div) d'un nom de propriété (visibility) : l'analyseur n'a actuellement aucun concept de regarder vers l'avenir. Pour comprendre que le est une propriété, le navigateur doit regarder vers l'avenir et voir si une : 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 un fichier CSS standard et sa valeur.

Heureusement, un ingénieur a découvert que, lorsque l'analyseur n'était pas en mesure d'analyser un sélecteur imbriqué en tant que propriété conformément à la passe de consommation normale, il peut s'agir redémarré dans un mode qui suppose un sélecteur au lieu d'une propriété. Analyse reprend, reconnaissant l'imbrication comme une imbrication de sélecteur. Il est assez rapide et suffisamment fiable pour être suffisamment déterminée pour libérer la syntaxe.