Imagina poder diseñar componentes que respondan al espacio disponible dentro de su propio contenedor, sin depender del viewport global. Eso es exactamente lo que ofrecen las Container Queries, la revolución más reciente en CSS para crear layouts verdaderamente flexibles.
¿Qué son las Container Queries?
Las Container Queries son una extensión de CSS que permite aplicar reglas de estilo basadas en el ancho, alto o proporción de cualquier elemento contenedor, no solo de la ventana del navegador. Esta característica ya está disponible en los navegadores modernos y se define en la especificación de CSS Container Queries.
Configuración del entorno
Para comenzar, solo necesitas un proyecto estático con HTML y CSS. Si prefieres usar un bundler, crea un proyecto con Vite – pero no es obligatorio.
1. Crea una carpeta y dentro un archivo index.html.
2. Añade un archivo styles.css y enlázalo.
3. Asegúrate de que tu navegador soporte Container Queries (Chrome 105+, Edge 105+, Safari 16+).
Construyendo el componente
Vamos a crear una tarjeta (card) que cambie su disposición interna según el ancho del contenedor. Primero definimos el markup:
<!DOCTYPE html>
<html lang='es'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Demo Container Queries</title>
<link rel='stylesheet' href='styles.css'>
</head>
<body>
<div class='wrapper'>
<section class='card'>
<img src='https://via.placeholder.com/300' alt='Imagen de ejemplo' class='card__img'>
<div class='card__content'>
<h3 class='card__title'>Título de la tarjeta</h3>
<p class='card__text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</section>
</div>
</body>
</html>Ahora, en styles.css, declaramos el contenedor y las reglas de las Container Queries:
/* Estilos base */
.wrapper {
max-width: 800px;
margin: 0 auto;
padding: 1rem;
border: 1px solid #ddd;
/* Declaramos el contenedor */
container-type: inline-size;
}
.card {
display: flex;
flex-direction: column;
background: #fafafa;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.card__img {
width: 100%;
height: auto;
}
.card__content {
padding: 1rem;
}
/* Container Query: cuando el contenedor mide al menos 500px */
@container (min-width: 500px) {
.card {
flex-direction: row;
}
.card__img {
width: 40%;
object-fit: cover;
}
.card__content {
width: 60%;
}
}
/* Variante para contenedores muy amplios */
@container (min-width: 750px) {
.card__title {
font-size: 2rem;
}
.card__text {
font-size: 1.125rem;
}
}Con este código, la tarjeta cambia de una disposición vertical a una horizontal cuando su contenedor supera los 500 px, y ajusta tipografía a partir de 750 px. Puedes probar redimensionando la ventana o colocando la tarjeta dentro de un div con diferentes anchos.
Mejores prácticas y accesibilidad
Al usar Container Queries, ten en cuenta lo siguiente:
- Define el contenedor explícitamente: sin la regla
container-type, las consultas no tendrán efecto. - Evita sobrescribir estilos críticos: combina Container Queries con
@mediasólo cuando sea necesario. - Considera la legibilidad: al cambiar la disposición, asegúrate de que el orden de lectura siga siendo lógico para lectores de pantalla.
Un ejemplo de mejora de accesibilidad es mantener siempre el texto antes de la imagen en el DOM, incluso cuando la presentación sea horizontal.
Conclusión
Las Container Queries permiten que tus componentes se adapten a su propio contexto, reduciendo la dependencia del viewport y mejorando la modularidad del código. Integrarlas en tus proyectos ahora te brinda una ventaja competitiva en diseño responsivo.
