CSS Container Query
Generator
Construya visualmente container queries @container con GUI. Configuración de container-type/name, breakpoints, 6 presets y vista previa. Convierta media queries fácilmente. Sin registro.
Configuración del Contenedor
Presets
Breakpoints
Vista Previa en Vivo
Código Generado
🔄 Media Query → Container Query
También te puede interesar
Acerca del Generador Container Query CSS
El Generador Container Query CSS es una herramienta para desarrolladores que permite construir visualmente "container queries", el nuevo estándar en diseño responsivo, usando una GUI. Mientras que las media queries dependen del ancho de la pantalla, las container queries dependen del ancho del elemento padre, permitiendo un diseño flexible por componente.
Esta herramienta maneja la configuración de container-type/name, adición de breakpoints y vista previa. También cuenta con un convertidor masivo para media queries existentes, facilitando la transición. Todo se ejecuta de forma segura en su navegador.
Cómo utilizar
Configurar y Añadir Breakpoints
Establezca el selector del contenedor y container-type (generalmente inline-size). Luego "Añadir Breakpoint" e ingrese los estilos CSS para aplicar cuando el contenedor alcance un tamaño específico.
Vista Previa
Arrastre el borde derecho del área de vista previa para redimensionar el contenedor y verifique que los estilos cambien correctamente. Puede probar con código HTML personalizado.
Exportar y Convertir
Copie el código CSS generado. Use el "Convertidor de Media Query" para reemplazar fácilmente la sintaxis existente de @media a @container, ahorrando esfuerzo de migración.
Glosario de Container Query
- Container Query (@container)
- Una función CSS para cambiar estilos según el tamaño de un elemento padre específico en lugar del viewport.
- container-type
- Propiedad que define un elemento como contenedor de consulta. inline-size es el eje horizontal; size son ambos ejes.
- container-name
- Propiedad para nombrar explícitamente un contenedor, útil cuando hay múltiples contenedores anidados.
- Containment (Contención)
- Concepto requerido para container queries, aísla el diseño/cálculos de estilo del resto del DOM.
- Eje en línea (Inline-axis)
- El eje por el que fluye el texto. En escritura horizontal, corresponde al ancho.
- Media Query (@media)
- Función tradicional de CSS que aplica estilos según el tamaño de la pantalla.
- cqw / cqh / cqi / cqb
- Unidades relativas para container queries que representan el 1% de la dimensión del contenedor.
Preguntas Frecuentes
- Q.¿Se envían mis datos a un servidor?
- No. Esta herramienta se ejecuta completamente del lado del cliente (en su navegador). Los datos no se envían a servidores externos.
- Q.¿Debería usar media queries o container queries?
- Use media queries para diseños de nivel superior (encabezados, barras laterales) y container queries para componentes (tarjetas, botones) que optimizan su diseño basado en el espacio disponible.
- Q.¿Cuál es la compatibilidad del navegador?
- Es compatible con todos los navegadores modernos desde 2023. Los navegadores heredados no son compatibles, pero se pueden implementar soluciones alternativas.
- Q.¿Precauciones al usar container-type: size?
- Si usa size, se aplica contención de altura. Si no establece una altura explícita, el elemento puede colapsar a altura cero.
- Q.¿Cómo se aísla la vista previa de HTML personalizado?
- Usamos Shadow DOM para aislar el área de vista previa, asegurando que el CSS del generador no interfiera con el marcado.
Casos de Uso
Componentes de Tarjeta Reutilizables
Perfecto para diseñar tarjetas que se adaptan a un área principal de 3 columnas o una barra lateral de 1 columna.
Integración de CMS y Widgets
Cree bloques para CMS como WordPress que ajustan automáticamente su diseño independientemente del ancho del área.
Paneles de Control Complejos
Ideal para optimizar dinámicamente la colocación de gráficos en paneles redimensionables.
Modernización de Código Heredado
Use el convertidor para transicionar bloques masivos de media query en container queries mantenibles.
Documentación Técnica de Container Query
Las Container Queries CSS se logran combinando la regla @container y la propiedad container-type. Es un enfoque fundamentalmente diferente a las media queries tradicionales.
Diferencia con Media Queries
Las media queries (@media) cambian estilos según las dimensiones del viewport. Las container queries (@container) cambian estilos según las dimensiones del contenedor padre, aplicando el diseño correcto automáticamente.
Valores de container-type
inline-size permite consultas en el eje horizontal (inline). size consulta ambos ejes pero requiere contención de altura. normal es el valor predeterminado.
Soporte de Navegadores
Compatible con Chrome 105+, Safari 16+, Firefox 110+ y Edge 105+. Los navegadores no compatibles simplemente ignoran las reglas (progressive enhancement).
Enviar comentarios
Déjenos saber su opinión para ayudarnos a mejorar la herramienta.
Los comentarios están temporalmente suspendidos
El servidor está ocupado o la protección contra spam está activa. Inténtelo más tarde.