Durante años, todo el diseño responsive en CSS ha dependido del ancho del navegador. Pero eso está empezando a cambiar.
Hoy te quiero hablar de una de las funcionalidades más potentes que han llegado recientemente a CSS: las Container Queries, y de una propiedad clave para usarlas: container-type.
Y sí, esto tiene implicaciones directas en el futuro de WordPress, Gutenberg y cómo diseñamos nuestras webs.
El problema con el diseño responsive clásico
Cuando diseñamos sitios web, normalmente usamos media queries así:
@media (max-width: 768px) {
.tarjeta {
flex-direction: column;
}
}
Esto funciona bien cuando todo se basa en el ancho de la ventana. Pero… ¿qué pasa si estás trabajando con componentes reutilizables?
Por ejemplo, imagina una tarjeta que a veces se muestra en un grid ancho al final de cada post y otras veces en una columna más estrecha como la barra lateral (sidebar). El tamaño de la ventana puede ser el mismo, pero el espacio para esa tarjeta no.
Ahí es donde las media queries tradicionales fallan. No responden al tamaño del contenedor, sino al del viewport.
¿Qué son las Container Queries?
Las Container Queries permiten que los estilos se apliquen en función del tamaño del contenedor, no del navegador.
Así:
@container (max-width: 500px) {
.tarjeta h2 {
font-size: 1.2rem;
}
}
Este código dice: “cuando el contenedor de .tarjeta tenga menos de 500px de ancho, reduce el tamaño del título”.
Da mucho más control para diseñar componentes flexibles, reusables y adaptativos.
¿Y qué es container-type?
Es la propiedad que activa un contenedor para poder aplicar Container Queries dentro de él.
Sin container-type, el navegador no tiene forma de saber que debe medir ese contenedor.
Ejemplo básico:
.tarjeta {
container-type: inline-size;
}
Esto convierte a .tarjeta en un “contenedor observador” de su propio ancho.
También puedes darle un nombre:
.tarjeta {
container-type: inline-size;
container-name: tarjeta;
}
Y luego usarlo en la query:
@container tarjeta (max-width: 500px) {
h2 {
font-size: 1.2rem;
}
}
¿Cómo se usa en WordPress?
En Gutenberg aún no se aprovecha… pero lo hará.
Los bloques de Gutenberg todavía no están configurados para trabajar con container-type por defecto, pero si usas bloques personalizados o estás creando un tema a medida, puedes activarlo fácilmente.
En themes modernos (Blocksy, GeneratePress, Kadence…)
Algunos ya están empezando a organizar su CSS para trabajar con layouts modulares. Incluso si todavía no usan @container, están preparando estructuras que facilitarán su adopción.
Ejemplo práctico en WordPress
Imagina que tienes un bloque de entradas recientes metido en una tarjeta .card. Puedes hacer esto en tu CSS:
.card {
container-type: inline-size;
container-name: tarjeta;
padding: 2rem;
background: #f9fafb;
border-radius: 8px;
}
@container tarjeta (max-width: 500px) {
.entry-title {
font-size: 1.2rem;
text-align: center;
}
}
Así, la tarjeta se adaptará a su propio espacio, y no al ancho total de la pantalla. Esto es perfecto para diseños con grid, sidebar, bloques en columnas, etc.
¿Está listo para producción?
Compatibilidad actual:
- ✅ Chrome, Edge, Firefox: ya lo soportan.
- 🔄 Safari: está implementándolo poco a poco.
- ❌ Internet Explorer: no, pero ya no lo necesitas.
Si haces un diseño progresivo, puedes empezar a usarlo hoy mismo.
Conclusión
Las Container Queries no son solo una novedad, son un cambio de paradigma.
Nos acercan a un CSS realmente modular y nos permiten crear bloques que responden al entorno donde están colocados, no al tamaño del navegador.
Y container-type es la clave para activarlas.
En WordPress, esto va a ser especialmente potente con Gutenberg y FSE. ¿Te imaginas diseñar bloques que se adapten solos sin tocar media queries globales?
Pues ya es posible.
Si aún no dominas CSS, échale un ojo a este artículo de Introducción al CSS.
Agregar Comentario