Qué es Generador de container queries CSS?
Generador de container queries CSS es una herramienta de navegador para esta tarea: Genera reglas @container CSS para diseno responsive basado en componentes. La salida es fácil de revisar antes de usarla en un sitio publicado.
Quick answer
Use container queries to style an element based on the size of its parent container instead of the viewport. They are the component-level equivalent of media queries and are useful for reusable widget layouts.
Limitations
- Container queries require Chrome 105+, Edge 105+, Firefox 110+, and Safari 16+. Older browsers ignore the feature entirely.
- The container-name property must reference a container-type ancestor in the DOM. Elements outside the container tree cannot query it.
- Container query units (cqw, cqh, cqi, cqb, cqmin, cqmax) are only meaningful inside a @container block and may produce unexpected values outside one.
Cómo usar esta herramienta
- Abre la herramienta y escribe los valores necesarios.
- Revisa la salida en el panel de resultado.
- Copia solo la parte que encaja con tu página.
- Prueba el cambio antes de publicar.
Para qué puedes usarla
- Resolver tareas repetidas de publicación con menos fricción.
- Preparar marcado, CSS o checklists antes del lanzamiento.
- Evitar pequeños errores comunes en sitios estáticos.