Actualización flexible de la sintaxis del anidamiento de CSS

Anidación anticipada habilitada en Chrome 120.

Adam Argyle

A principios de este año, Chrome envió el anidado de CSS en la versión 112, y tiene ahora en todos los navegadores principales.

Sin embargo, había un requisito estricto y potencialmente inesperado a la que se menciona en el primer artículo de los ejemplos de anidamiento no válido. En este artículo de seguimiento, se explicará lo que cambió en las especificaciones y los cambios de Chrome

Nombres de etiquetas de elementos anidados

Una de las limitaciones más sorprendentes en la primera versión de anidación de CSS fue la incapacidad de anidar nombres de etiquetas de elementos vacíos. Esta incapacidad tiene se quitó, por lo que es válido el siguiente anidamiento de CSS:

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

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

Esto se vuelve 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?

En gran parte, se debe a la exploración y el prototipado que realizaron los ingenieros de Chrome en combinación con el deseo de la comunidad y del grupo de trabajo de CSS.

Había muchas dudas respecto de que se podía enseñar al analizador de CSS a diferenciar entre un nombre de etiqueta (div) y un nombre de propiedad (visibility) como el analizador no tiene el concepto de mirar hacia adelante. Para entender que el el token es una propiedad, el navegador debe mirar hacia adelante y ver si sigue un : el token desconocido. Por lo tanto, en la especificación original, se usó el símbolo & para lo siguiente: le indica al navegador que lo que sigue estaba anidado y no una CSS normal propiedad y valor.

Un ingeniero descubrió que, cuando el analizador no pudo analizar selector anidado como una propiedad, según el pase de consumo normal, se podría en un modo que asumió un selector en lugar de una propiedad. Análisis se reanudará y reconocerá el anidamiento como el selector. Es lo suficientemente rápido y y es lo suficientemente confiable como para liberar la sintaxis.