Container Queries: adaptar estilos según el tamaño del contenedor

Las Container Queries representan una herramienta poderosa en desarrollo web para construir interfaces adaptativas eficientes. A diferencia de las Media Queries, que se basan en el ancho del viewport del navegador, las Container Queries permiten adaptar estilos según el tamaño específico de un contenedor individual.

¿Qué son las Container Queries y cómo funcionan?

Las llamadas Container Queries ofrecen la posibilidad de aplicar estilos según el ancho específico de un contenedor, no solo del viewport. Para activar esta funcionalidad, es necesario asignar al contenedor en cuestión el atributo container-type:

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

Esta propiedad indica que los estilos se modificarán según el tamaño en línea (ancho) del contenedor seleccionado.

¿Cómo aplicar Container Queries para ajustar elementos internos?

Una vez definido el container-type, es posible establecer diferentes comportamientos mediante la regla @container especificando un ancho límite:

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

En este ejemplo práctico, cuando la tarjeta alcanza menos de 220 píxeles de ancho, la descripción (párrafo) se oculta y el tamaño del título (h3) disminuye a 1REM.

¿Cómo agregar más acciones según la reducción del ancho?

Adicionalmente, si se requiere, es posible añadir otros cambios. Por ejemplo, ocultar el botón si la tarjeta llega a ser más chica:

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

Así, cuando la tarjeta esté por debajo de los 180 píxeles, tanto la descripción como el botón desaparecerán para optimizar el diseño.

¿Cuál es la diferencia principal entre Container Queries y Media Queries?

Mientras las Media Queries determinan estilos según el ancho del viewport del navegador, las Container Queries lo hacen directamente según el ancho individual de los elementos. Por ejemplo:

• Media Queries controlan estilos basándose en la ventana general del navegador.
• Container Queries se basan en medidas internas de cada contenedor específico.

Esta característica supone una enorme ventaja, permitiendo una adaptación más granular en interfaces complejas.

¿Pueden combinarse las Media Queries con Container Queries?

Definitivamente sí. No existe limitación alguna para utilizar ambas herramientas. Su uso dependerá exclusivamente de lo requerido por la estrategia específica del proyecto.

Si te gustaría compartir tus experiencias usando Container Queries o tienes dudas de cómo aplicarlas efectivamente, ¡déjanos tu comentario y crezcamos juntos aprendiendo!