Container queries, el CSS que pedía a gritos

Con soporte ya en todos los navegadores modernos, las container queries resuelven un problema que llevaba años maquillando con trucos.

Llevo años maquetando componentes que tienen que verse bien tanto solos, ocupando toda la pantalla, como metidos en una barra lateral estrecha. Con media queries de viewport eso nunca se ha podido resolver del todo bien, porque una media query no sabe nada del componente — sabe del ancho de la ventana del navegador, que es una cosa completamente distinta.

El problema de toda la vida

Una tarjeta de producto puede vivir en un grid de tres columnas en escritorio y también, en la misma página, dentro de una barra lateral de trescientos píxeles. Con @media (min-width: 900px), esa tarjeta no tiene forma de saber que está en la barra lateral — solo sabe que la ventana es ancha, así que aplica el mismo estilo “de escritorio” a las dos, y la de la barra lateral queda rota, con texto desbordado o una imagen que no encaja.

La solución de siempre era duplicar el componente con una clase modificadora (.card--sidebar) y maquetarlo dos veces a mano, o meterse en JavaScript con un ResizeObserver para simular lo que el CSS debería resolver solo.

Cómo lo resuelven las container queries

Con soporte ya asentado en todos los navegadores modernos, container-type: inline-size en el padre convierte ese elemento en un contenedor de consulta, y a partir de ahí @container (min-width: 400px) dentro del componente reacciona al ancho real de ese contenedor, no al de la ventana. La misma tarjeta, sin duplicar ni una línea, se adapta sola tanto en el grid de tres columnas como en la barra lateral estrecha.

Lo que cambia de verdad

No es solo menos código — es que el componente vuelve a ser responsable de sí mismo. Antes, saber cómo se iba a ver una tarjeta dependía de dónde la habías colocado en la página; ahora depende solo del propio componente y del espacio que tiene disponible, que es como debería haber sido siempre. Sigo usando media queries de viewport para decisiones de layout general de la página, pero para cualquier componente que se vaya a reutilizar en sitios distintos, container queries es ya la opción por defecto.