consultas de contenedores CSS: revolucionando el diseño receptivo

Este extracto de desatando el poder de CSS explora el potencial transformador de las consultas de contenedores en la elaboración de componentes web adaptables y resistentes. A diferencia de las consultas de los medios de vista de la vista que reaccionan a todo el tamaño de la ventana del navegador, las consultas de contenedores permiten el estilo basado en el espacio disponible de un elemento disponible , habilitando la capacidad de respuesta a nivel de componente verdaderamente

consultas de contenedores vs. consultas de medios de vista

Diseño receptivo basado en la visión tradicional se basa en puntos de interrupción vinculados a tamaños de dispositivos simplificados (móvil, tableta, escritorio), a menudo junto con una cuadrícula de diseño. Este enfoque lucha con la adaptabilidad de los componentes individuales; Los elementos más grandes pueden ajustarse por separado, pero generalmente siguen los puntos de interrupción globales.

Las consultas de contenedores ofrecen una solución superior. La siguiente imagen demuestra un componente de tarjeta diseñado con consultas de contenedores, completamente independiente del tamaño de la ventana gráfica. La apariencia de la tarjeta se adapta dinámicamente a su espacio disponible.

Nota: El soporte amplio del navegador para consultas de contenedores existe desde Firefox 110. Los polyfills están disponibles para navegadores más antiguos.

Definición de consultas de contenedores

Para utilizar consultas de contenedores, primero declare un elemento como contenedor usando la propiedad contenedor-type . inline-size (equivalente al ancho en modos de escritura horizontal) es el valor más común y ampliamente compatible:

.container {
  container-type: inline-size;
}

Siguiente, emplee @Container At-Rule para definir la consulta. El siguiente ejemplo establece el color h2 al azul cuando su contenedor tiene 40ch de ancho o más grande:

@container (min-width: 40ch) {
  h2 {
    color: blue;
  }
}

Para una compatibilidad más amplia en los modos de escritura, use propiedades lógicas:

@container (inline-size > 40ch) {
  h2 {
    color: blue;
  }
}

beyond inline-size , las opciones incluyen block-size y aspecto-ratio . Consulte la especificación oficial para obtener más detalles.

actualizando un componente de tarjeta: un ejemplo práctico

sin consultas de contenedores, las variaciones de la tarjeta generalmente involucrarían clases de modificadores vinculadas a los puntos de interrupción de la vista. La imagen a continuación muestra tres tamaños de tarjeta y sus clases correspondientes.

[CodePen Demo: Tarjetas de consulta de medios Viewport] (enlace a codepen)

Usando consultas de contenedores, mantenemos un estilo de tarjeta predeterminado (para navegadores no compatibles) y definimos estilos adicionales basados ​​en el ancho del contenedor:

• 350px o mayor: diseño horizontal
• 600px o mayor: imagen como fondo

[CodePen Demo: Consultas de contenedores para tarjetas] (enlace a codepen)

Este extracto es de desatando el poder de CSS: técnicas avanzadas para interfaces de usuario receptivas , disponibles en SitePoint Premium.

key takeaways:

• consultas de contenedores ofrece capacidad de respuesta a nivel de componente.
• se definen usando Container-type y @contenedor .
• Las propiedades lógicas mejoran la compatibilidad del modo de escritura cruzada.
• Proporcionan un enfoque más flexible y granular para el diseño receptivo que las consultas de los medios de vista.

(nota: Reemplace "Enlace a CodePen" con enlaces de CodePen reales si están disponibles.)