El anidamiento de vista previa se habilitó en Chrome 120.
A principios de este año, Chrome lanzó la anidación de CSS en 112 y ahora está disponible en todos los navegadores principales.
Sin embargo, había un requisito estricto y potencialmente inesperado para la sintaxis, que se enumera en el primer artículo de los ejemplos de anidación no válidos. En este artículo posterior, se abordarán los cambios en la especificación y de Chrome 120.
Anidar nombres de etiquetas de elementos
Una de las limitaciones más sorprendentes de la primera versión de la sintaxis de anidación de CSS fue la incapacidad de anidar nombres de etiquetas de elementos vacíos. Se quitó esta incapacidad, lo que hace que el siguiente anidamiento de CSS sea válido:
.card {
h1 {
/* this is now valid! */
}
}
/* the same as */
.card {
& h1 {
/* this is now valid! */
}
}
Esto resulta muy útil cuando se anidan listas ordenadas, desordenadas o de definiciones:
dl {
dt {
/* dl dt styles */
}
dd {
/* dl dd styles */
}
}
¿Qué cambió para permitir este anidado?
Esto se debe en gran medida a que los ingenieros de Chrome exploran y crean prototipos, en combinación con el deseo de la comunidad y el grupo de trabajo de CSS.
Hubo bastante duda de que se podía enseñarle al analizador de CSS a diferenciar entre un nombre de etiqueta (div) y un nombre de propiedad (visibility), ya que, actualmente, el analizador no tiene el concepto de mirar al futuro. Para comprender que el
token es una propiedad, el navegador debe mirar hacia adelante y ver si un : sigue
al token desconocido. Por lo tanto, en la especificación original, se usó el símbolo & para indicar al navegador que lo que sigue se anidó y no una propiedad ni un valor normal de CSS.
Por suerte, un ingeniero descubrió que, cuando el analizador no analizaba el selector anidado como una propiedad según el pase de consumo normal, se podía reiniciar en un modo que supone un selector en lugar de una propiedad. Se reanuda el análisis y se confirma el anidamiento como selector de anidación. Es lo suficientemente rápido y confiable como para determinarlo lo suficientemente rápido como para liberar la sintaxis.