Cómo usar esta herramienta para desarrolladores
- Define el selector del contenedor.
- Elige container-type y nombre opcional.
- Configura el ancho mínimo y/o máximo.
- Escribe las reglas del componente y genera el CSS.
CSS Container Query Builder
Genera consultas @container orientadas al tamaño del contenedor en lugar del viewport. Configura container-type, un nombre opcional y condiciones min/max para envolver reglas de componentes reutilizables.
Datos de entrada
Parámetros y código fuenteEspacio publicitario
Qué hace esta herramienta para desarrolladores
Produce la declaración del contenedor y un bloque @container con condición de inline-size.
Cuando se indica un nombre, la consulta se genera como @container nombre (condición). Sin nombre, usa la consulta anónima.
La compatibilidad depende del navegador objetivo. Verifica soporte de container queries en tu matriz de navegadores.
Ejemplo
.card-shell { container-type: inline-size; container-name: card; }
@container card (min-width: 420px) { ... }
Casos de uso
- Tarjetas reutilizables.
- Widgets embebidos.
- Sidebars adaptables.
- Componentes independientes del viewport.
Consejos para obtener resultados fiables
- Usa inline-size salvo que necesites consultar ambos ejes.
- Nombra contenedores cuando existan varios ancestros candidatos.
- Evita depender del viewport dentro del mismo componente si buscas encapsulación.
- Prueba el componente en distintos contextos de layout.
Detalles del procesamiento
La herramienta genera únicamente size container queries basadas en ancho.
No construye style queries ni scroll-state queries y no comprueba soporte por versión de navegador.
Preguntas frecuentes
¿Cuál es la diferencia entre @container y @media?
@container responde al tamaño de un ancestro contenedor; @media responde a características del viewport o dispositivo.
¿Qué container-type debo usar para consultar el ancho?
inline-size es suficiente para consultas sobre el eje inline y suele ser la opción más específica.
¿Necesito poner container-name?
No. Es opcional, pero ayuda a dirigir una consulta a un contenedor concreto cuando hay varios posibles.
¿Puedo combinar min-width y max-width en @container?
Sí. El modo rango genera ambas condiciones unidas con and.
¿La herramienta genera style queries?
No. Se centra en consultas de tamaño, que tienen un modelo de entrada y validación más predecible en una herramienta estática.
Herramientas relacionadas para desarrolladores
Resumen del resultado
| Módulo | Función |
|---|---|
| Entrada | Parámetros configurables |
| Salida | Código listo para copiar |
| Validación | Comprobaciones locales en el navegador |