CSS Container Queries (en español, consultas de contenedor en CSS) es una característica emergente del lenguaje de hojas de estilo en cascada (CSS) que permite aplicar estilos a un elemento en función de las características de su contenedor padre, en lugar de depender exclusivamente del tamaño de la ventana del navegador o viewport. Representa un avance clave en el diseño web responsive, permitiendo una mayor modularidad y adaptabilidad de los componentes web.
Descripción
A diferencia de las tradicionales media queries, que aplican estilos según el tamaño global de la ventana, las container queries permiten condicionar estilos basados en el tamaño, orientación u otras propiedades del contenedor inmediato de un elemento. Esto se logra mediante la regla @container y propiedades asociadas como container-type y container-name, las cuales definen contenedores "consultables".
Esto permite que un componente web pueda adaptar su diseño interno en función del espacio disponible dentro de su contenedor, favoreciendo así una arquitectura basada en componentes reutilizables, como las utilizadas en frameworks modernos de desarrollo frontend o en micro-frontends.
Sintaxis básica
Para definir un contenedor consultable:
.container { container-type: inline-size; }
Para aplicar estilos condicionales según el tamaño del contenedor:
@container (min-width: 600px) { .elemento { font-size: 1.5rem;
Unidades relativas al contenedor
El estándar también introduce nuevas unidades de medida relativas al contenedor, como cqw (1 % del ancho del contenedor), cqh (1 % de la altura), así como cqi, cqb y otras. Estas unidades permiten construir diseños más fluidos y adaptativos.
Relevancia en diseño web
Las consultas de contenedor resuelven una limitación histórica del diseño web responsivo: la imposibilidad de aplicar estilos basados en el tamaño de un componente padre. Con estas herramientas, los desarrolladores pueden crear componentes verdaderamente independientes y reusables, ya que sus estilos se adaptan al entorno local del componente sin necesidad de depender del contexto global.
Esto simplifica la lógica de diseño, reduce el uso de media queries globales y mejora la mantenibilidad en aplicaciones frontend modernas.
Estatus y soporte
CSS Container Queries forma parte del borrador del módulo CSS Conditional Rules Module Level 5 del W3C, sucesor del borrador anterior CSS Containment Level 3. Aunque aún no es un estándar oficial definitivo, ya cuenta con soporte en los principales navegadores:
Google Chrome: desde la versión 105 Microsoft Edge: desde la versión 105 Safari: desde la versión 16 Firefox: desde la versión 110 (febrero de 2023)
Esto permite su uso en producción con una amplia compatibilidad, marcando un punto de inflexión en la evolución de CSS.
Recepción y adopción
La comunidad de desarrollo web ha recibido esta funcionalidad como una evolución importante del lenguaje CSS. Sitios especializados y conferencias técnicas han destacado cómo las container queries permiten interfaces más limpias, modulares y fáciles de mantener. Su adopción temprana por los navegadores refleja su relevancia práctica.
Véase también Media queries Diseño web adaptable CSS Componentes web
Referencias
Enlaces externos
W3C – CSS Conditional Rules Module Level 5 Mozilla Developer Network – Container Queries Google Web.dev – Container Queries InfoQ – Container Queries: The next step towards a truly modular CSS CSS-Tricks – A Complete Guide to Container Queries
Categoría:CSS Categoría:Estándares web Categoría:Desarrollo web Categoría:Lenguajes de hojas de estilo