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

L'imbrication d'anticipation 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, il existait une exigence stricte et potentiellement inattendue concernant la syntaxe, listée dans le premier article des exemples d'imbrication non valides. Cet article de suivi décrit les modifications apportées à la spécification et à partir de Chrome 120.

Noms des balises d'éléments imbriqués

L'une des limites les plus surprenantes de la première version de la syntaxe d'imbrication CSS était l'impossibilité d'imbriquer des noms de balises d'éléments nus. 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! */
  }
}

Cette fonctionnalité est particulièrement utile 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 permettre cet imbrication ?

Cela est dû en grande partie à l'exploration et au prototypage effectués par les ingénieurs Chrome, ainsi qu'au souhait 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 ne parvenait pas à analyser le sélecteur imbriqué en tant que propriété conformément au passage de consommation normal, il pouvait être redémarré dans un mode qui supposait un sélecteur au lieu d'une propriété. L'analyse reprend, en reconnaissant l'imbrication comme imbrication de sélecteur. Il est suffisamment rapide et fiable pour être considéré comme suffisant pour publier la syntaxe.