Uso de Container Queries para Diseño Web Adaptativo

Las Container Queries representan una técnica avanzada en desarrollo web para lograr diseños altamente adaptativos. A diferencia de las tradicionales Media Queries que basan su funcionamiento en el ancho del viewport, las Container Queries aplican estilos según el ancho específico de un contenedor determinado. Esta funcionalidad permite desarrollar interfaces más flexibles y dinámicas, ideales para aplicaciones modernas.

¿Qué son las Container Queries y para qué sirven?

Las Container Queries permiten aplicarle estilos específicos a los elementos HTML en función del ancho del contenedor en el que están colocados, no del tamaño total de la pantalla.

En el ejemplo se observa tres contenedores o tarjetas que incluyen elementos comunes:

• Una imagen.
• Un título (H3).
• Una descripción (párrafo).
• Un botón.

Al reducir el ancho individual de cada tarjeta, se activan estilos específicos, como la ocultación del párrafo o la reducción del tamaño del título, mejorando significativamente la adaptabilidad del contenido.

¿Cómo implementar Container Queries en tus proyectos web?

Para aplicar Container Queries en CSS debemos seguir pasos concretos. Primero, indicamos el tipo de contenedor agregando el atributo correspondiente al elemento deseado:

.tarjeta {
  container-type: inline-size;
}

Luego, especificamos las Container Queries usando la sintaxis @container como a continuación:

@container (max-width: 220px) {
  .tarjeta p {
    display: none;
  }
  .tarjeta h3 {
    font-size: 1rem;
  }
}

@container (max-width: 180px) {
  .tarjeta button {
    display: none;
  }
}

Este código implica que: - Con menos de 220 píxeles de ancho en el contenedor, se oculta la descripción. - También, en menos de 220 píxeles, el tamaño del título se ajusta a 1 rem. - Cuando es menor de 180 píxeles, se oculta además el botón.

¿Cuáles son las diferencias entre Container Queries y Media Queries?

Aunque ambos métodos tienen como objetivo la respuesta adaptativa del diseño:

• Media Queries: adaptan el diseño según el ancho del viewport general.
• Container Queries: realizan ajustes puntuales dependiendo del ancho de elementos específicos (contenedores).

La principal ventaja del uso de Container Queries se encuentra en la precisión para adaptar elementos individuales, permitiendo ajustes visuales más eficientes ante diferentes condiciones espaciales.

Te invitamos a implementar esta estrategia en tu próximo proyecto y compartirnos tu experiencia o dudas en los comentarios.