Las consultas de contenedores llegan a navegadores estables

Este Día de San Valentín, celebramos las consultas de tamaño de contenedores y las unidades de consultas de contenedores que llegan a todos los navegadores estables.

Una Kravets

¡El amor por la consulta de contenedores está en el aire! En este día de San Valentín, el tamaño de las consultas de contenedores y las unidades de consulta en contenedores son estables en todos los navegadores modernos.

Con las consultas de contenedores, puedes consultar la información de estilo de un elemento superior, como su inline-size. Con las consultas de medios, puedes consultar el tamaño del viewport, las consultas de contenedores habilitan componentes que pueden cambiar en función de dónde se encuentren en la IU.

Las consultas de contenedores son especialmente útiles para el diseño responsivo y los componentes reutilizables. Por ejemplo, habilitar un componente de tarjeta que se pueda diseñar de una manera cuando se coloca en una barra lateral, y en una configuración diferente dentro de una cuadrícula de productos.

Usa consultas de contenedores

Para usar consultas de contenedores, primero debes establecer la contención en un elemento superior. Para ello, configura una container-type en el contenedor superior o usa la abreviatura container para asignarle un tipo y un nombre de forma simultánea:

.card-container {
  container: card / inline-size;
}

Si estableces container-type como inline-size, se consultará el tamaño de la dirección intercalada del elemento superior. En idiomas latinos como el inglés, este sería el ancho de la tarjeta, ya que el texto fluye en línea de izquierda a derecha.

Ahora, puedes usar ese contenedor para aplicar estilos a cualquiera de sus elementos secundarios con @container:

.card-child {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
 .card-child {
  grid-template-columns: 1fr;
 }
}

Además, puedes usar los valores de unidad de longitud de consulta de contenedores de la misma manera que lo harías con valores de unidad basados en el viewport. La diferencia es que las unidades del contenedor corresponden al contenedor y no al viewport. En el siguiente ejemplo, se muestra la tipografía responsiva con el uso de unidades de consulta de contenedor y la función clamp() para dar un valor de tamaño mínimo y máximo:

.card-child h2 {
  font-size: clamp(2rem, 15cqi, 4rem);
}

El 15cqi anterior hace referencia al 15% del tamaño intercalado del contenedor. La función clamp() le da un valor mínimo de 2rem y un máximo de 4rem. Mientras tanto, si 15cqi está entre estos valores, el texto se reducirá y aumentará, en consecuencia.

Una consulta de contenedor en San Valentín

Para celebrar el amor de las consultas de contenedores en esta festividad, creamos un evento de San Valentín para que lo disfruten, sin importar en qué navegador estable (versión más reciente) estén viendo esto.