Este día de San Valentín, celebramos las consultas de contenedores de tamaño y las unidades de consultas de contenedores que llegan a todos los navegadores estables.
¡El amor en las consultas de contenedores está en el aire! En este día de San Valentín, las consultas de contenedores de tamaño y las unidades de consulta de contenedor 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 según 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 puede diseñarse 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 contenedor, primero configura la contención en un elemento superior. Para ello, configura un 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;
}
Cuando se establece container-type como inline-size, se consulta 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 valores de unidad de longitud de consulta de contenedores de la misma manera que usarías valores de unidad basados en viewports. 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 unidades de consulta de contenedores 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 otorga 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á de manera correspondiente.
Una consulta de contenedor de San Valentín
Para celebrar el amor por la búsqueda de contenedores en estas fiestas, creamos un Día de San Valentín para que todos disfruten, sin importar en qué navegador estable (la versión más reciente) estén viendo este contenido.
Parte de la serie Renovadamente interoperable