Define contenedores independientes del viewport y genera el código CSS moderno necesario en segundos.
Durante años, los desarrolladores web hemos dependido exclusivamente de las Media Queries para adaptar nuestros diseños a las pantallas de los usuarios. Sin embargo, este enfoque presentaba una limitación crítica: obligaba a que todos los componentes respondieran al tamaño global de la pantalla (viewport), dificultando la creación de elementos verdaderamente modulares.
Las CSS Container Queries resuelven este problema de raíz. Permiten que un componente modifique sus estilos según el tamaño del contenedor que lo aloja, y no de la pantalla completa. Con esto, nosotros podemos insertar una tarjeta informativa en una barra lateral estrecha o en el centro de un diseño ancho, y el componente se adaptará automáticamente de forma inteligente.
Nuestra herramienta simplifica el proceso de adopción de esta tecnología. Sigue estos sencillos pasos para empezar:
inline-size para responder a cambios de ancho (el caso más habitual) o size si también requieres evaluar la altura.Una Container Query evalúa el tamaño de un contenedor padre específico en lugar del tamaño de la pantalla completa (viewport). Esto permite crear componentes verdaderamente modulares y reutilizables en cualquier parte de una web.
Actualmente, las Container Queries tienen un soporte excelente (superior al 90%) en todos los navegadores modernos, incluyendo Chrome, Firefox, Safari y Edge, por lo que son seguras para su uso en producción.
"inline-size" aplica la query basándose únicamente en el ancho del contenedor (el eje de escritura horizontal), que es el caso de uso más común. "size" tiene en cuenta tanto el ancho como el alto, requiriendo dimensiones fijas o predecibles en ambos ejes.