Resumen

  • El primer borrador público de CSS Containment Level 3, fechado el 21 de diciembre de 2021, propuso consultar las dimensiones de elementos dentro de la página. container-type establece un contenedor y @container condiciona los estilos de sus descendientes.
  • El borrador del 18 de agosto de 2022 refinó la sintaxis, las unidades relativas y las consultas de tamaño. Su ejemplo coloca un mismo componente en el área principal y en la barra lateral para mostrar cómo cambia su disposición.

La tarjeta se había vestido para la portada: foto a la izquierda, titular y entradilla a la derecha. En el cuerpo principal respiraba. En la barra lateral, todo se apelotonaba como pasajeros en la puerta del metro. El navegador ocupaba una ventana grande en ambos casos. Una consulta de medios veía esa ventana y respondía «hay sitio». La tarjeta, atrapada en una columna estrecha, tenía una opinión menos optimista.

El primer borrador público del W3C, del 21 de diciembre de 2021, separó las dos escalas. Las consultas de medios preguntan por el entorno de visualización, como las dimensiones de la ventana. Las consultas de contenedor pueden preguntar por elementos dentro del documento, incluida la caja que recibe a un componente. Una pieza reutilizable necesita entender dónde la han colocado. El tamaño del edificio no dice cuánto mide su habitación.

Para dar una respuesta fiable, el autor marca un antepasado adecuado mediante container-type. Después, @container deja aplicar reglas a los descendientes cuando ese contenedor cumple una condición. Una tarjeta con espacio suficiente puede alinear imagen y texto; en un hueco estrecho los apila. Son dos apariencias posibles en la misma pantalla. El editor decide los destinos del componente; el navegador mide el espacio local en cada uno.

Había un problema de ingeniería debajo de la elegancia. Si el tamaño de la caja dependiera del diseño que sus hijos eligieran tras consultar ese mismo tamaño, el cálculo podría perseguirse a sí mismo. Una demostración del W3C en 2021 explicó la necesidad de definir los contenedores y controlar el dimensionamiento basado en su contenido. Ese límite convierte la anchura de la caja en una referencia que puede consultarse para decidir la presentación de sus hijos.

El borrador de trabajo del 18 de agosto de 2022 eligió un ejemplo muy parecido al problema editorial: un objeto multimedia pasa de disposición vertical a horizontal según el contenedor del área principal o de la barra lateral. container-type: inline-size habilita la consulta en el eje en línea, y un nombre puede señalar un contenedor concreto. La condición de @container se evalúa para el descendiente respecto de su antepasado elegible. Así, la tarjeta pregunta por la caja en la que vive, no por la anchura de otro rincón de la página.

Las unidades cqw y cqi permiten expresar medidas relativas a la anchura o al tamaño en línea del contenedor. Una decoración o un espacio interno puede crecer y encoger con la tarjeta. El grupo CSS del W3C destacó precisamente la combinación de confinamiento en un eje, unidades y regla de consulta al anunciar el nuevo borrador.

La forma de escribirlo cambió mientras avanzaba el trabajo. El texto de 2021 aún exploraba opciones de container-type como block-size y state; el de 2022 retiró la primera opción de eje único y ajustó valores y abreviaturas. La historia de publicaciones del W3C deja fechadas ambas etapas. No fue una magia que nació terminada: se afinaron las medidas, los tipos de caja y las reglas para que el sastre no se confundiera de cliente.

La ventana grande siguió siendo grande. Lo que cambió fue la capacidad de CSS para escuchar a la columna pequeña. La tarjeta pudo mudarse sin llevarse a rastras un diseño pensado para una habitación mucho mayor.