Entrevista de Frontend: ¿En qué se diferencian las CSS Container Queries de las Media Queries?

Planteamiento y contexto

Un componente de tarjeta aparece en la columna principal, en una barra lateral y en una cuadrícula. Explica en qué se diferencian las container queries de CSS de las media queries, escribe CSS que cambie el diseño a partir del ancho del contenedor de la tarjeta y describe la contención, el alcance, el fallback y las pruebas.

Las media queries evalúan características del viewport o del dispositivo; las container queries evalúan el tamaño, estilo o estado de desplazamiento de un contenedor de consulta ancestro. La guía de entrevistas de CSS de GreatFrontEnd incluye las container queries como una pregunta de entrevista, la lista de preguntas de HTML/CSS de Hack Frontend cubre el tema y MDN documenta container-type, @container y las unidades de container query. Esta pregunta no está vinculada a una empresa específica.

Qué evalúan los entrevistadores

Los entrevistadores quieren que el candidato identifique el objetivo de respuesta antes de escribir CSS. Una respuesta sólida explica que container-type: inline-size establece un contexto de consulta de tamaño, que las reglas de consulta aplican estilos a los descendientes en lugar de al contenedor mismo, que el ancestro apto más cercano se utiliza por defecto y por qué diferentes anchos de tarjeta necesitan container queries incluso en un mismo ancho de viewport.

También verifican la comprensión de los efectos secundarios de la contención de tamaño, los límites de contenedores con nombre, el fallback para navegadores y las pruebas. El simple hecho de reemplazar @media por @container sin establecer un contenedor o sin manejar el anidamiento no funcionará de manera confiable.

Preguntas para clarificar

• ¿Qué debe impulsar la respuesta? Este planteamiento responde al tamaño en línea (inline size) de la tarjeta, no a todo el viewport.
• ¿Se requieren consultas de estilo o de estado de desplazamiento? No; esta respuesta se centra en las consultas de tamaño y trata las demás como extensiones.
• ¿Cuál es el objetivo de compatibilidad con navegadores? Confírmalo primero, luego mantén un diseño base utilizable y un fallback.
• ¿Se pueden anidar los límites de los componentes? Si es así, utiliza container-name para hacer explícito el límite previsto.

Respuesta de 30 segundos

“Las media queries observan el viewport y se adaptan a los puntos de interrupción a nivel de página; las container queries observan el ancestro de un componente y se adaptan a componentes reutilizables ubicados en diferentes espacios. Configuro container-type: inline-size en la lista de tarjetas, luego uso @container para cambiar el diseño de la tarjeta en un umbral de tamaño en línea. La consulta aplica estilos a los descendientes y utiliza el contenedor apto más cercano por defecto; utilizo container-name para anidamientos complejos. Proporciono estilos base y un fallback con @supports, luego mantengo el viewport fijo mientras redimensiono el elemento padre en la columna principal, la barra lateral, la cuadrícula y un navegador no compatible.”

Respuesta paso a paso

Paso 1: Comparar el objetivo de respuesta y el alcance

Las media queries son ideales para la navegación, las columnas de página, la impresión y las preferencias del usuario. Las container queries resuelven el caso en el que un componente desconoce qué tan ancho será su espacio: una columna principal y una barra lateral pueden usar diferentes diseños con el mismo ancho de viewport.

Paso 2: Establecer un contexto de consulta de tamaño

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

.card {
  display: grid;
  gap: 0.75rem;
}

@container card-list (inline-size > 40rem) {
  .card {
    grid-template-columns: 8rem 1fr;
    align-items: center;
  }
}

inline-size establece un contenedor de consulta de tamaño en el eje en línea (inline axis) y funciona bien cuando los modos de escritura importan. size establece una contención más fuerte en dos ejes y solo debe elegirse cuando se necesitan consultas en el eje de bloque. normal no establece un contexto de consulta de tamaño. La condición se escribe en @container y la regla coincidente se aplica a los descendientes.

Paso 3: Comprender los contenedores más cercanos, nombres y unidades

Sin un nombre, el navegador encuentra el ancestro apto más cercano; por lo tanto, los componentes anidados pueden leer el límite incorrecto. Un nombre hace explícita la intención: @container card-list (...) coincide únicamente con el contenedor llamado card-list. Las unidades de longitud de container query, como cqw y cqi, escalan a partir del ancho o tamaño en línea del contenedor de consulta, pero deben combinarse con mínimos y máximos razonables para que los contenedores muy pequeños no produzcan texto ilegible.

Una consulta no debe hacer que el contenedor cambie su propio tamaño en función de su resultado, o podría producirse un bucle de retroalimentación; las reglas de contención y alcance previenen ese bucle. La contención de tamaño también puede alterar el dimensionamiento automático, así que revisa el contenido vacío, las imágenes no cargadas y las alturas que dependen del contenido.

Paso 4: Diseñar el fallback y la mejora progresiva

.card {
  display: block;
}

@supports (container-type: inline-size) {
  .card-list {
    container-type: inline-size;
  }

  @container (inline-size > 40rem) {
    .card {
      display: grid;
      grid-template-columns: 8rem 1fr;
    }
  }
}

El diseño base debe seguir siendo legible sin container queries. Una media query puede proporcionar un fallback a nivel de página, pero un punto de interrupción del viewport no puede representar con precisión cada ancho de barra lateral o celda de cuadrícula. Cuando el navegador de destino carece de la capacidad evaluada, debe mantener los estilos base sin perder el contenido principal ni la interacción.

Paso 5: Escenarios de prueba y límites

Mantén fijo el viewport del navegador. Coloca el mismo componente en una columna principal, una barra lateral y una cuadrícula de dos columnas, luego cambia únicamente el ancho del padre y verifica que la tarjeta responda al contenedor en lugar de al viewport. Prueba contenedores con nombre anidados, diferentes modos de escritura, imágenes antes y después de cargarse, contenedores muy estrechos, espacios dinámicos y un navegador sin soporte para container queries. También verifica que el componente no dependa de la profundidad del DOM de una página en particular, lo que podría seleccionar de forma silenciosa el contenedor incorrecto al reutilizarse.

Límites de implementación aceptables

Una respuesta no necesita cubrir todos los tipos de consulta, pero debe distinguir con precisión el viewport de un contenedor ancestro y hacer que el ejemplo sea ejecutable con un contexto de consulta real. Si el candidato elige size, consultas de estilo o consultas de estado de desplazamiento, debe explicar los efectos de contención adicionales, el navegador de destino y los límites de prueba. Cuando el soporte es incierto, el diseño base debe ser el valor predeterminado seguro.

Errores comunes y contraejemplos

• Olvidar container-type: @container sin un contexto de consulta no responde al tamaño.
• Convertir al contenedor en su propio objetivo de consulta: las consultas estables aplican estilos a los descendientes; el autodimensionamiento a partir del resultado puede crear un bucle.
• Usar size por defecto: la contención en dos ejes puede afectar el dimensionamiento automático; elije inline-size para una necesidad exclusivamente horizontal.
• Probar solo en una pantalla ancha: una barra lateral y una columna principal difieren en un mismo ancho de viewport, por lo que debes redimensionar el elemento padre con el viewport fijo.
• Omitir un fallback base: los navegadores no compatibles necesitan un diseño base utilizable antes de la mejora.

Preguntas de seguimiento y respuestas

¿Cuándo seguirías usando media queries?

Usa media queries cuando la navegación, las columnas de la página, la impresión o las preferencias del usuario dependan del viewport o de las características de medios. Usa container queries cuando el punto de interrupción interno de un componente dependa de su padre.

¿Cómo eliges entre inline-size y size?

Elige inline-size cuando el componente responda solo al espacio horizontal disponible. Considera size cuando se requieran tanto el eje de bloque como el eje en línea, y luego verifica el dimensionamiento automático, el contenido vacío y el comportamiento posterior a la carga de imágenes.

¿Cómo manejas los navegadores no compatibles?

Proporciona un diseño base fluido o de una sola columna y mejóralo progresivamente con @supports (container-type: inline-size). Las media queries pueden complementar el comportamiento a nivel de página, pero no pueden reemplazar todos los puntos de interrupción a nivel de contenedor.