Container queries frente a media queries

Las consultas de medios responden a las dimensiones de la ventana gráfica. Las consultas de contenedor responden a las dimensiones del contenedor principal. Esta distinción determina qué herramienta debe usar para cada problema.

Use consultas de medios para:

• Cambios en el diseño global de la página (una o dos columnas)
• Mostrar u ocultar secciones grandes de la página (un cajón de navegación en dispositivos móviles)
• Escalar la tipografía base a nivel de página
• Estilos de impresión
• Consultas de preferencias del usuario (modo oscuro, movimiento reducido)

Use consultas de contenedor para:

• Cambios de diseño a nivel de componente (tarjeta horizontal o vertical)
• Componentes situados en contenedores desconocidos (barra lateral, área principal o barra lateral dentro del área principal)
• Componentes reutilizables de un sistema de diseño
• Widgets integrados en páginas de terceros

Una tarjeta diseñada con consultas de medios funciona en un punto de corte de una página de 1200 px de ancho. Si esa tarjeta se mueve a una barra lateral, puede necesitar puntos de corte diferentes. Con las consultas de contenedor, la misma tarjeta funciona sin más: se adapta al espacio disponible.

Las aplicaciones reales usan ambas. Las consultas de medios definen el diseño general (la barra lateral aparece a partir de determinados anchos de escritorio); las consultas de contenedor definen el comportamiento de los componentes dentro de ese diseño.

A diferencia de las consultas de medios (que no añaden especificidad), las consultas de contenedor sí añaden especificidad de contexto. Una regla dentro de @container (min-width: 400px) tiene la misma especificidad que la misma regla fuera de él, pero solo se aplica dentro de ese contexto de contenedor.

Las consultas de contenedor son compatibles con todos los navegadores modernos desde 2023 (Chrome 105+, Firefox 110+, Safari 16+). Actualmente puede usarlas con seguridad en proyectos nuevos sin alternativas para objetivos de navegadores modernos.

Para proyectos que requieran compatibilidad con navegadores antiguos, use @supports para comprobar si se admiten las consultas de contenedor:

Las consultas de contenedor tienen sus propias características de rendimiento: cada elemento con container-type crea un límite de contención del diseño. Esto evita que los cambios de tamaño internos afecten al exterior, lo que en realidad supone una ventaja de rendimiento. Los cambios de las consultas de medios pueden desencadenar recálculos globales del diseño.

Chrome DevTools muestra una insignia «cq» junto a los elementos contenedores en el panel Elements. Haga clic en ella para visualizar los límites del contenedor y probar las condiciones de las consultas de contenedor con el inspector de diseño de DevTools.

Un componente de tarjeta de un sistema de diseño debe cambiar de un diseño apilado a uno contiguo según el ancho disponible en cualquier contexto. ¿Qué enfoque es mejor?

Las consultas de medios responden a la ventana gráfica global; las consultas de contenedor responden al tamaño de un contenedor principal. Use consultas de medios para decisiones de diseño globales y consultas de preferencias del usuario. Use consultas de contenedor para componentes reutilizables que deban adaptarse a su contexto. Combine ambas: consultas de medios para el diseño general de la página y consultas de contenedor para la adaptación de los componentes dentro de ese diseño.