Generador de consultas de contenedor CSS

• Generador visual de consultas de contenedores: cree consultas de contenedores CSS visualmente con nuestro generador interactivo de consultas de contenedores. Establezca el tipo de contenedor (tamaño en línea, tamaño o normal), agregue condiciones de consulta con operadores y unidades personalizados y defina estilos responsivos, todo sin escribir una sola línea de CSS a mano.
• Privado: no se requiere carga del servidor: el generador de consultas del contenedor se ejecuta completamente en su navegador. Las configuraciones de su contenedor, las condiciones de consulta y los estilos de respuesta nunca abandonan su dispositivo. Toda la generación de CSS es 100% del lado del cliente sin carga de datos.
• Vista previa en vivo con controles de cambio de tamaño: vea exactamente cómo se comporta su consulta de contenedor con un panel de vista previa de tamaño variable en vivo. Utilice los botones de ancho preestablecido (320 px a 1024 px) o el control deslizante interactivo para probar su consulta en cualquier ancho de contenedor. La vista previa se actualiza instantáneamente para mostrar si se aplica la consulta.
• Salida CSS lista para usar: copie la regla @container generada, la declaración de contenedor o la cadena de condición de consulta con un solo clic. El generador de consultas de contenedores produce CSS listo para producción con un escape adecuado para los nombres de los contenedores y una sintaxis de consulta de medios con el formato correcto.

• Capacidad de respuesta de los componentes de React: los desarrolladores de React utilizan el generador de consultas de contenedor para crear componentes verdaderamente receptivos que se adaptan a su contenedor principal en lugar de a la ventana gráfica. Cree componentes de tarjeta, barra lateral y panel que reorganicen su diseño según el ancho del contenedor disponible, algo esencial para las bibliotecas de componentes reutilizables donde el mismo componente aparece en contenedores de diferentes anchos.
• Diseños responsivos modernos: los diseñadores web utilizan el generador de consultas de contenedor para crear diseños que respondan al elemento contenedor en lugar de a la ventana gráfica. Esto es especialmente poderoso para las cuadrículas de paneles, áreas de widgets y diseños anidados donde los elementos aparecen en múltiples contextos en diferentes tamaños: las consultas de contenedor se adaptan naturalmente sin duplicación de consultas de medios.
• Sistemas de paneles y widgets adaptables: cree sistemas de widgets y paneles laterales que adapten su diseño interno a medida que el usuario los cambia de tamaño. El generador de consultas de contenedor ayuda a crear widgets de barra lateral, paneles de chat y cajones de configuración responsivos que reorganizan el contenido, cambiando de diseños apilados a uno lado a lado según el ancho del contenedor en lugar del ancho de la pantalla.
• CMS y contenido del generador de páginas: los editores de contenido que usan WordPress, Drupal o creadores de páginas como Elementor pueden usar el generador de consultas de contenedor para crear bloques de contenido que respondan al ancho de su columna. Un diseño de dos columnas en el escritorio se convierte en una sola columna en el dispositivo móvil, pero el mismo bloque de contenido se adapta de manera diferente dependiendo de si está en una posición de ancho completo o de barra lateral.
• Adaptabilidad de los componentes del sistema de diseño: los arquitectos del sistema de diseño utilizan el generador de consultas de contenedor para definir variantes responsivas de los componentes del sistema de diseño: tarjetas, tablas, barras de navegación y diseños de formularios que se adaptan en función de su contenedor principal. Las consultas de contenedores eliminan la necesidad de accesorios de respuesta frágiles y habilitan componentes verdaderamente autónomos.
• Cuadrículas de tarjetas de productos de comercio electrónico: los desarrolladores de comercio electrónico utilizan el generador de consultas de contenedores para crear tarjetas de productos que realizan una transición perfecta entre vistas de cuadrícula y de lista a medida que cambia el ancho del contenedor. Las imágenes de productos, los títulos, los precios y los botones para agregar al carrito se reorganizan automáticamente cuando el usuario ajusta la cantidad de columnas en una cuadrícula de productos.

Las consultas de contenedor CSS (parte de la especificación de nivel 3 del módulo de contención CSS) le permiten aplicar estilos a un elemento según el tamaño de su elemento contenedor (contenedor), en lugar de la ventana gráfica. Este es un cambio fundamental con respecto a las consultas de medios, que responden al tamaño de la ventana gráfica. Con las consultas de contenedor, un componente puede adaptar su diseño, tipografía y apariencia en función de la cantidad de espacio que proporciona su contenedor principal, lo que hace que el componente realmente responda al contenedor. Nuestro generador de consultas de contenedor le ayuda a crear estas reglas visualmente sin memorizar la sintaxis exacta.

1. Defina el contenedor: establezca un nombre de contenedor y un tipo de contenedor. El tipo más común es inline-size, que convierte al elemento en un contenedor de consultas que responde a cambios de ancho. Utilice tamaño si necesita consultar tanto el ancho como el alto. Utilice normal para la contención sin funcionalidad de consulta.
2. Agregar condiciones de consulta: agregue una o más condiciones usando propiedades como ancho, alto, tamaño en línea o relación de aspecto con prefijos mínimo o máximo. Se unen varias condiciones con y . El generador de consultas de contenedor admite unidades CSS estándar (px, em, rem), así como unidades de consulta de contenedor (cqw, cqi, cqh).
3. Defina estilos responsivos y vista previa: agregue declaraciones CSS que deberían aplicarse cuando la consulta coincida. Utilice los ajustes preestablecidos de estilo (Tarjeta compacta, Tarjeta expandida, etc.) como puntos de partida o ingrese pares de propiedad-valor personalizados. Cambie el tamaño de la vista previa en vivo para ver exactamente cuándo se cumplen las condiciones de su consulta.

• Alcance: las consultas de medios responden al tamaño de la ventana gráfica: el ancho de la ventana del navegador. Las consultas de contenedor responden al tamaño de un elemento principal específico. Esto hace que las consultas de contenedores sean ideales para componentes reutilizables que aparecen en diferentes contextos.
• Reutilizabilidad: un componente con consultas de contenedor funciona correctamente ya sea que aparezca en una barra lateral estrecha (300 px), un área de contenido principal (800 px) o una sección principal de ancho completo (1200 px). Las consultas de medios requerirían que el componente conociera el contexto de su ventana gráfica.
• Compatibilidad con navegador: las consultas de contenedor CSS son compatibles con Chrome 105+, Firefox 110+, Safari 16+ y Edge 105+. Ahora son estables y están listos para producción en todos los navegadores modernos. Utilice el generador de consultas de contenedor para generar estilos de mejora progresiva.
• Rendimiento: las consultas de contenedor pueden tener más rendimiento que las consultas de medios en cuanto a la capacidad de respuesta a nivel de componente porque abarcan los recálculos de estilo al subárbol del contenedor en lugar de a todo el documento.

Las consultas de contenedores CSS introducen nuevas unidades relativas que se calculan en función de las dimensiones del contenedor: cqw (1% del ancho del contenedor), cqi (1% del tamaño en línea del contenedor), cqh (1% de la altura del contenedor), cqb (1% del tamaño del bloque del contenedor), cqmin (el más pequeño de cqi y cqb) y cqmax (el más grande de cqi y cqb). Estas unidades son especialmente útiles para tipografía fluida y espaciado que escala con el contenedor en lugar de con la ventana gráfica. Por ejemplo, font-size:clamp(0.875rem, 2cqi, 1.5rem) escala el tamaño de fuente suavemente entre 0.875rem y 1.5rem a medida que el contenedor crece de aproximadamente 44px a 75px de tamaño en línea.