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.^[1]​

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".^[2]​

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.^[3]​

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;
  }
}

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.^[4]​ Estas unidades permiten construir diseños más fluidos y adaptativos.

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.^[5]​

Esto simplifica la lógica de diseño, reduce el uso de media queries globales y mejora la mantenibilidad en aplicaciones frontend modernas.

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.^[6]​ 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)^[7]​

Esto permite su uso en producción con una amplia compatibilidad, marcando un punto de inflexión en la evolución de CSS.

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.^[2]​ Su adopción temprana por los navegadores refleja su relevancia práctica.

• Media queries
• Diseño web adaptable
• CSS
• Componentes web

1. ↑ «CSS Container Queries». MDN Web Docs. 2023. 
2. ↑ ^{a b} «CSS Container Queries are stable». Web.dev. 2022. 
3. ↑ «Container Queries: The next step towards a truly modular CSS». InfoQ. 2022. 
4. ↑ «length - CSS: Cascading Style Sheets». MDN Web Docs. 2023. 
5. ↑ Geoff Graham (2023). «A Complete Guide to Container Queries». CSS-Tricks. 
6. ↑ «CSS Conditional Rules Module Level 5». W3C. 2023. 
7. ↑ «CSS Container Queries – Browser Compatibility». MDN Web Docs. 2023. 

• 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