jquery.app
Espanol
EnglishDeutschFrancaisEspanol日本語Nederlands

Herramientas CSS

Gratis Generador de container queries CSS

Genera reglas @container CSS para diseno responsive basado en componentes.

Cargando herramienta...

Qué es Generador de container queries CSS?

Las container queries le permiten aplicar estilos CSS basados en el tamaño de un contenedor padre en lugar del viewport. Esto es diferente de las media queries, que responden a la ventana del navegador. Para componentes reutilizables, las container queries significan que el mismo componente puede renderizarse correctamente en una barra lateral estrecha y un área de contenido principal ancha sin duplicar estilos.

Respuesta rápida

Use container queries para diseñar un elemento basándose en el tamaño de su contenedor padre en lugar del viewport. Son el equivalente a nivel de componente de las media queries y son útiles para diseños de widgets reutilizables.

Last updated: 2026-05-25

Limitaciones

  • Las container queries requieren Chrome 105+, Edge 105+, Firefox 110+ y Safari 16+. Los navegadores antiguos ignoran la característica por completo.
  • La propiedad container-name debe referenciar un ancestro container-type en el DOM. Los elementos fuera del árbol del contenedor no pueden consultarlo.
  • Las unidades de container query (cqw, cqh, cqi, cqb, cqmin, cqmax) solo tienen significado dentro de un bloque @container y pueden producir valores inesperados fuera de uno.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Cómo usar esta herramienta

  1. Establezca un container-type y un container-name opcional para el elemento padre que será la referencia de la consulta.
  2. Elija una condición de punto de interrupción como min-width, max-width o un rango de inline-size.
  3. Escriba las reglas CSS que deberían aplicarse cuando se cumpla la condición.
  4. Copie el bloque @container generado y colóquelo dentro de la hoja de estilos de su componente.

Para qué puedes usarla

  • Hacer que un componente de tarjeta cambie de diseño horizontal a vertical cuando su contenedor se encoge.
  • Construir una fila de formulario que apile campos en contenedores estrechos y los coloque en línea en contenedores anchos.
  • Crear un widget que ajuste su fuente y espaciado según el ancho del contenedor, independientemente del viewport.

Casos de uso

Ejemplos prácticos

Ejemplo

Componente de tarjeta en barra lateral y contenido principal

Una tarjeta reutilizable se coloca tanto en una barra lateral estrecha como en una columna principal ancha. Con container queries, la tarjeta usa un diseño apilado en la barra lateral y un diseño horizontal en el contenido principal, todo desde una sola clase de componente.

Ejemplo

Fila de formulario que se adapta al espacio disponible

Un formulario con campos de nombre, correo electrónico y teléfono usa una container query en el fieldset. Cuando el contenedor es más ancho de 500px, los campos están en línea. Por debajo de 500px, cada campo se apila en su propia línea.

Errores comunes

  • Aplicar container queries a un elemento sin establecer container-type en un padre, lo que significa que no se establece ningún contexto de contenedor y las consultas nunca se aplican.
  • Usar unidades de viewport como vw o vh dentro de una container query, que todavía referencian el viewport en lugar del contenedor.
  • Depender completamente de container queries sin un diseño de respaldo, lo que deja el componente sin estilo en navegadores que no soportan container queries.

Verificación

  1. Redimensione el elemento contenedor en DevTools y verifique que los elementos hijos respondan a los cambios de tamaño del contenedor, no a los cambios del viewport.
  2. Verifique los estilos de respaldo en navegadores no compatibles estableciendo estilos base fuera del bloque @container.

FAQ

Preguntas sobre Generador de container queries CSS

¿Qué navegadores soportan container queries?

Las container queries son compatibles con todos los navegadores modernos a partir de Chrome 105, Firefox 110, Safari 16 y Edge 105. Para navegadores antiguos, proporcione un diseño de respaldo que funcione sin reglas @container.

¿Cuál es la diferencia entre inline-size y size para container-type?

inline-size establece un contenedor de consulta que responde solo a la dimensión en línea, que es el ancho en modos de escritura horizontales. size establece un contenedor que responde tanto al ancho como a la altura pero requiere contain: layout style en el contenedor, lo que puede afectar el comportamiento del diseño.

¿En qué se diferencian las container queries de las media queries?

Las media queries responden al tamaño del viewport y a condiciones globales del navegador. Las container queries responden al tamaño de un elemento contenedor padre. Esto significa que un componente diseñado con container queries se adapta a su contenedor independientemente de dónde se coloque — en una columna principal ancha, una barra lateral estrecha o una cuadrícula de tarjetas — sin necesidad de puntos de interrupción de media query separados para cada contexto de diseño.

¿Qué sucede si uso @container sin establecer container-type en el padre?

La regla @container no tiene efecto y los estilos contenidos nunca se aplican. Cada container query requiere un elemento ancestro con container-type establecido en inline-size, size o normal. El navegador busca en la cadena ancestra el contexto de contenedor más cercano. Si no encuentra ninguno, la consulta falla silenciosamente.

Herramientas relacionadas

Más herramientas css

Prueba también

Prueba también