Container Queries vs Media Queries en CSS

Curso de Storybook: Sistemas de Diseño con JavaScript

Contenido del curso

Visión general de los sistemas de diseño en desarrollo

Desarrollo de componentes

Historias en Storybook

Essential Addons en Storybook

Pruebas de componentes en Storybook

Próximos pasos

21
Qué sigue después de Storybook
01:17 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:38

Container Queries vs Media Queries en CSS

Curso de Storybook: Sistemas de Diseño con JavaScript

Clase 9 de 21

Clase 9 / 21

Recursos

Los container queries en CSS permiten que un componente cambie su diseño según el tamaño de su contenedor padre, no del viewport. Esta funcionalidad, disponible desde 2022, transforma la manera de construir responsive design y resulta especialmente útil para quienes trabajan con design systems y componentes reutilizables.

¿En qué se diferencian los container queries de los media queries?

Durante años, el responsive design se apoyó en media queries, que ajustan estilos según el tamaño del viewport. El problema es que no todo en la web debería depender de la ventana del navegador.

Imagina una card con imagen y texto que aparece en dos lugares: un menú lateral angosto y un contenedor principal amplio. Con media queries, ambas se verán igual porque solo reaccionan al viewport. Con container queries, cada card adapta su forma al ancho de su propio contenedor padre.

¿Qué es un container query? Es una regla de CSS que aplica estilos a un componente según el tamaño de su contenedor padre, no del viewport. Permite que un mismo componente luzca distinto en diferentes zonas de la página.

¿Cómo se escribe un container query en CSS?

La sintaxis se parece a la de media queries, pero requiere un paso previo: declarar el contenedor.

Primero, defines el padre con la propiedad container-type y el valor inline-size. Esto le indica al navegador que ese elemento será la referencia de medida.

css .wrapper { container-type: inline-size; container-name: card; }

Luego, en lugar de usar @media, escribes @container y defines el ancho mínimo a partir del cual cambian los estilos del componente hijo.

css @container card (min-width: 400px) { .card { display: flex; } }

¿Para qué sirve container-name?

Cuando trabajas con varios contenedores en la misma página, container-name te permite asignar un identificador a cada uno. Así, en la consulta @container card (...) el navegador sabe exactamente a qué padre debe observar para aplicar los estilos.

¿Cuándo conviene usar container queries en lugar de media queries? Cuando un componente debe adaptarse a su contexto inmediato y no al tamaño de la pantalla. Por ejemplo, una card que aparece tanto en un sidebar estrecho como en un grid amplio.

¿Por qué los container queries cambian la forma de construir design systems?

Un design system vive de la reutilización. Una misma card puede aparecer en un menú lateral, en un grid principal o dentro de un modal, y cada contexto pide proporciones distintas.

Antes, la solución obligaba a duplicar componentes o a llenar el CSS de excepciones. Con container queries, un solo componente reacciona automáticamente al espacio que tiene disponible. Y aquí viene lo interesante: el componente ya no necesita saber dónde vive, solo cuánto espacio tiene.

¿Cómo experimentar con container queries antes de usarlos en producción?

Existe un lab interactivo, similar al de Jen Simmons, donde puedes probar distintos componentes y hacer resize del contenedor para ver cómo se transforman en tiempo real.

Algunos ejemplos útiles para practicar son:

Una card con imagen y texto que cambia de columna a fila según el ancho del padre.
Un componente article con thumb, título y descripción que se reorganiza al redimensionar su wrapper.
Un sidebar con tarjetas verticales y un contenedor principal con la misma tarjeta en horizontal.

Después de probar varios casos, vas a notar que el cambio ocurre solo al mover el contenedor, sin tocar el tamaño de la ventana. Esa es la magia.

¿Los container queries ya son compatibles con los navegadores?

La compatibilidad ronda el 76% según Can I Use, una cifra sólida para uso en producción. Chrome, Firefox y Safari ya soportan container queries en sus versiones recientes.

Algunos esperaban un 90%, pero el soporte actual cubre la mayoría de los escenarios reales. Antes de implementarlos en un proyecto crítico, revisa siempre Can I Use con la versión específica de los navegadores de tu audiencia.

¿Ya habías escuchado sobre container queries? Cuéntame en los comentarios si exploraste el lab interactivo, qué tal te fue al revisar la compatibilidad en Can I Use y en qué componente de tu design system los aplicarías primero.

Visión general de los sistemas de diseño en desarrollo

Qué es Storybook y para qué sirve

Creación de Sistemas de Diseño con Storybook

Desarrollo de componentes

Instalación de Storybook con Vanilla JavaScript

Arquitectura de componentes en Storybook con Atomic Design

Exportar design tokens de Figma a CSS

Crear un botón reutilizable con Storybook

Estilización de Botones en CSS: Clases y Hover Interactivo

Componente Card en JavaScript con BEM

Container Queries vs Media Queries en CSS

Estilización de Componentes CSS con Container Queries

Historias en Storybook

Cómo estructurar historias en Storybook

Controles de argTypes para botones en Storybook

Parámetros y decoradores en Storybook

Essential Addons en Storybook

Qué son los add-ons en Storybook

Actions y Backgrounds en Storybook

Viewports y outline en Storybook

Pruebas de componentes en Storybook

Cómo usar el test runner de Storybook

Pruebas de Interacción con Storybook y Testing Library

Pruebas de Accesibilidad en Storybook con Add-ons

Pruebas visuales de UI con Chromatic

Próximos pasos

Qué sigue después de Storybook

Container Queries vs Media Queries en CSS

Progreso del curso

Visión general de los sistemas de diseño en desarrollo

Desarrollo de componentes

Historias en Storybook

Essential Addons en Storybook

Pruebas de componentes en Storybook

Próximos pasos

Recursos

Recursos