CSS container queries

<< Responsive Preferencias de usuario >>

En el punto anterior hemos visto cómo modificar el estilo dependiendo el tamaño de la página o dispositivo. Con los Container queries, vamos a hacer lo mismo pero dependiendo del contenedor padre específico, pudiendo cambiar el tamaño de ciertos elementos y hacer que tengan una forma o estilos distintos dependiendo de su contexto.

Antes de empezar, os recomiendo que veáis un vídeo muy interesante sobre @container

Para utilizar esta funcionalidad, debemos determinar lo primero de todo qué elemento hará de contenedor y para ello haremos uso de la propiedad container-name, siempre que queramos hacer container queries debemos dar un nombre al contenedor para hacer referencia a él. La sintaxis que tiene esta propiedad es container-name: nombre. El siguiente punto será la propiedad container-type, donde permitirá establecer el tipo de tamaño de los contenedores (normal | size | inline-size), donde usaremos size para indicar que serán elementos de bloque o inline-size para elementos en línea.

Otra opción de esta propiedad es usar container: nombreContenedor / tipoContenedor y nos estaríamos ahorrando las dos declaraciones anteriores.

Una vez que tenemos el contenedor definido haríamos uso de la regla @container de la siguiente forma: @container nombreContenedor (<condiones>), como podemos observar es muy parecida a la sintaxis de los media queries.

.container{
    container: parent / inline-size;
}
@container parent (max-width: 500px) {
    body {
        line-height: 1.4;
    }
}

Cuando estamos usando la regla @container podemos utilizar las unidades de los container query como son: cqw(porcentaje relativo al ancho del contenedor), cqh(porcentaje relativo al alto del contenedor), cqi(porcentaje relativo al tamaño en línea), cqb(porcentaje relativo al tamaño en bloque), cqmin(porcentaje más pequeño entre cqi y cqb) o cqmax(porcentaje mayor entre cqi y cqb). El objetivo es que si desconocemos el tamaño concreto del contenedor aplicamos con estas medidas un porcentaje de su tamaño. Es decir, que si ponemos 50cqw estamos diciendo que se le va a dar un tamaño del 50% de ancho del contenedor. Funcionan de forma parecida a las unidades vistas anteriormente vw, vh, vmin y vmax.

<< Responsive Preferencias de usuario >>