Container queries: dimensionar componentes según su contenedor y no según el viewport

Qué es

Una media query pregunta cuál es el ancho del viewport; una container query pregunta cuál es el ancho de un ancestro concreto. Un elemento se convierte en contenedor de consulta con container-type: inline-size (consultas sobre el eje en línea) o size (ambos ejes), y opcionalmente se le puede dar un nombre con container-name. Las reglas dentro de @container (width > 40em) { .card { … } } se aplican a los descendientes según el ancestro más cercano que tenga un contexto de contención, o según el ancestro con nombre cuando se indica uno. MDN enumera unidades relativas al contenedor (cqw, cqh, cqi, cqb, cqmin, cqmax), cada una equivalente al 1 % de la dimensión del contenedor, que se pueden usar en cualquier lugar donde se admita una longitud, por ejemplo en font-size.

Por qué importa

Un componente colocado en una barra lateral, en una columna principal y en un modal no puede deducir el espacio del que dispone a partir del ancho del viewport. Con breakpoints basados en el viewport, cada ubicación necesita sus propios ajustes; con container queries, el componente lleva consigo sus breakpoints y se adapta dondequiera que se coloque. Esto es lo que permite que los componentes de un sistema de diseño se reutilicen entre distintos layouts, en lugar de entre distintas páginas.

Cómo aplicarlo

• Haz que el contenedor sea el elemento envolvente, no el propio componente. Un elemento no puede responder a su propio tamaño: el contenido cambiaría el tamaño y haría que la consulta cambiara de resultado, lo que MDN describe como un bucle infinito y es la razón por la que se aplica la contención de tamaño.
• Prefiere inline-size. El valor size también aplica contención sobre el eje de bloque, por lo que el elemento deja de crecer con su contenido a menos que tenga una altura explícita.
• Da nombre a los contenedores cuando los componentes se anidan (container-name: card) y consulta por nombre, para que una consulta interna no coincida con un ancestro no deseado.
• Usa cqi para tipografía y espaciado fluidos dentro de un componente, envuelto en clamp() para que los valores extremos sigan siendo legibles.
• Reserva las media queries del viewport para el layout a nivel de página (número de columnas, navegación) y las container queries para los componentes; ambas pueden convivir.
• Los breakpoints dentro de @container deben ser valores literales, ya que las propiedades personalizadas no están permitidas en las condiciones de consulta; mantenlos en un único lugar por componente.

Trampas

La contención modifica el layout: el ancho de un contenedor inline-size debe venir del contexto (un elemento de bloque que se estira hasta su padre) o establecerse de forma explícita; de lo contrario colapsa y la consulta nunca coincide. Las consultas de estilo de contenedor (@container style(--x: y)) son una funcionalidad distinta; comprueba su compatibilidad por separado de la de las consultas de tamaño. Un contenedor de consulta cuyo tamaño depende de sus hijos (un elemento flex con flex: 0 0 auto, una caja con posicionamiento absoluto y sin ancho) es la causa habitual de que "la consulta nunca se dispara".