Los contenedores (container queries) del lenguaje CSS proporcionan un método para aislar los estilos en ciertas secciones de la página. Esto permite indicarle al navegador web que tanto los estilos como la disposición de estas secciones son independientes del resto, por lo que tendrán estilos específicos.
Una de las principales ventajas del uso de los contenedores es que se obtiene un diseño más flexible y preciso. En esencia, el concepto de los contenedores es similar al de las consultas de medios (media queries), pero en vez de aplicar estilos según el tipo de dispositivo lo hace según el contenedor.
En resumen: mientras que las consultas de medios permiten aplicar estilos CSS según las características del dispositivo, los contenedores permiten aplicar estilos según las características de un contenedor.
El contenedor (elemento padre) será el marco de referencia para aplicar estilos a los elementos hijos. De esta forma, podremos aplicar estilos específicos a los elementos hijos en función de las características del contenedor, como puede ser su tamaño. Es una particularidad muy útil en diseño web responsive.
Para crear contenedores se usa una serie de propiedades CSS que se detallan en la tabla siguiente. También se utiliza la regla arroba @container.
Propiedades descritas en este artículo:
| Propiedad | Descripción |
|---|---|
container-name | Especifica el nombre del contenedor. |
container-type | Indica el tipo de tamaño del contenedor. |
container | Abreviatura para definir contenedores. |
Antes de conocer las propiedades arriba descritas, vamos a ver un pequeño ejemplo en el que creamos un contenedor redimensionable.
Código CSS:
.contenedor {
container-type: inline-size;
overflow: hidden;
resize: horizontal;
}
.contenido {
background: teal;
border-radius: 8px 8px 0;
height: 50px;
width: 100%;
}
@container (max-width: 200px) {
.contenido {
background: #ff7f2a;
}
}
El código HTML es muy simple:
<div class="contenedor">
<div class="contenido"></div>
</div>
Ajusta el ancho del contenedor para hacer más ancho o más estrecha la caja del elemento. Si conviene, rota el móvil 90 grados para tener más espacio. El elemento cambia de color cuando mide menos de 200 píxeles.
La propiedad ‘container-name’
La propiedad container-name permite especificar un nombre o una lista de nombres de contenedores para después utilizarlos dentro de la regla arroba @container. De esta forma será posible aplicar estilos a los elementos hijos, apuntando específicamente al elemento contenedor (padre).
El valor de esta propiedad será un nombre o una lista de nombres separados por espacios. Se distingue entre mayúsculas y minúsculas, por lo que «nombre» y «Nombre» equivalen a dos nombres diferentes. Los nombres no se indicarán entre comillas. Se permite el uso de variables CSS como valor. El valor por defecto es none, con el que no se asigna ningún nombre.
Veamos algunos ejemplos:
.contenedor {
container-name: parent meta;
}
.contenedor {
container-name: tarjeta;
}
.contenedor {
container-name: uno dos tres;
}
.contenedor {
container-name: none;
}
La propiedad ‘container-type’
Una vez se ha asignado un nombre nombre, se puede establecer el tipo de tamaño del contenedor. Para ello se utiliza la propiedad CSS container-type. Con esta propiedad se aplica una «contención de tamaño» que desactiva la capacidad de un elemento de obtener información de tamaño de su contenido. Esto es importante para que las consultas de contenedor no entren en bucles infinitos.
Esta propiedad admite como valor una serie de palabras clave referentes al tipo de tamaño. A continuación se muestra una lista de los valores posibles:
| Valor | Descripción |
|---|---|
normal | El elemento no hace una consulta del tamaño, pero se comporta como un contenedor. Es el valor por defecto. |
size | En la consulta de contenedor se toma como referencia las dimensiones de bloque y de línea del elemento. |
inline-size | En la consulta de contenedor solo se toma como referencia la dimensión de línea del elemento. |
Por tanto, para los valores inline-size y size se aplicará contención en la disposición, estilos y tamaño al contenedor. Para el valor size, el tamaño será de bloque y de línea, mientras que para el valor inline-size el tamaño solo será de línea y no tendrá en cuenta la altura del contenedor.
Veamos algunos ejemplos de código CSS:
.contenedor {
container-type: size;
}
.contenedor {
container-type: inline-size;
}
.contenedor {
container-type: normal;
}
La propiedad ‘container’
La propiedad container es una abreviatura (shorthand) que unifica las dos propiedades anteriores: container-name y container-type. Los valores de estas dos propiedades se deben separar mediante una barra inclinada (/).
El valor por defecto de la propiedad container equivale a los valores de las otras dos propiedades, quedando de este modo:
.ejemplo {
container: none / normal;
}
Veamos otros ejemplos de uso de esta propiedad:
.ejemplo {
container: nombre / size;
}
.ejemplo {
container: uno dos / inline-size;
}
La regla arroba ‘@container’
Cuando ya se tiene el contenedor definido (nombre y tipo de tamaño), el siguiente paso es aplicar estilos al contenedor. La regla arroba @container permite aplicar estilos de forma condicional a los elementos hijos de un contenedor, basándose en su tamaño. Su funcionamiento es similar a las consultas de medios, pero en vez de depender del tamaño de la ventana, depende del tamaño del contenedor.
Debido a la similitud con las consultas de medios (media queries), también es posible usar los operadores lógicos para formar condicionales más complejos y algunas de las características sobre el tamaño.
Su sintaxis es la siguiente:
@container (condicion) {
/* ... */
}
Operadores lógicos
Las condiciones de los contenedores se pueden combinar mediante el uso de algunos operadores lógicos. Así se puede formar condiciones más complejas y a la vez más precisas, lo que ofrece una gran flexibilidad en el diseño web.
| Operadores | Descripción |
|---|---|
and | Concatena múltiples condiciones en una única consulta. Ambas condiciones deben ser verdaderas. |
or | La consulta devuelve verdadero cuando como mínimo una de las condiciones indicadas sea verdadera. |
not | Se invierte la condición indicada. En este caso, la consulta será verdadera cuando la condición sea falsa. |
only | Si se cumple la condición y el navegador es moderno, se aplicará los estilos. Evita estilos en navegadores antiguos. |
Con el símbolo de la coma también se puede combinar múltiples consultas de contenedores en una sola regla. De esta forma tan simple será posible aplicar los mismos estilos CSS en diferentes contextos.
Tamaño del contenedor
Para aplicar estilos CSS dependiendo del tamaño del contenedor puede utilizarse las siguientes características, que serán de utilidad tanto para la altura como para la anchura. Se listan en la tabla siguiente junto con sus descripciones.
| Característica | Descripción |
|---|---|
width | Define la anchura. |
min-width | Define la anchura mínima. |
max-width | Define la anchura máxima. |
height | Define la altura. |
min-height | Define la altura mínima. |
max-height | Define la altura máxima. |
Vamos a visualizar un código de ejemplo, en el que aplicaremos estilos CSS cuando el contenedor tenga un ancho inferior a los 500 píxeles:
@container (max-width: 500px) {
/* ... */
}
Por otra parte, hay que saber que en vez de las palabras clave de la tabla anterior es posible usar operadores matemáticos que significan lo mismo:
- Menor que:
< - Mayor que:
> - Menor o igual que:
<= - Mayor o igual que:
>=
El ejemplo anterior quedaría así:
@container (width <= 500px) {
/* ... */
}
La proporción de aspecto
Otro condicional soportado en los contenedores tiene que ver con la relación de aspecto de la caja. Para ello se utiliza la característica aspect-ratio. Como valor admite un número entero una fracción numérica. Por ejemplo, con 1/3 se indica que el ancho será un tercio más corto que la altura.
| Característica | Descripción |
|---|---|
aspect-ratio | Define la proporción. |
min-aspect-ratio | Define la proporción mínima. |
max-aspect-ratio | Define la proporción máxima. |
Por ejemplo:
@container (max-aspect-ratio: 1/3) {
/* ... */
}
Para la proporción de aspecto también se puede usar los operadores matemáticos que se indican a continuación: <, >, <= y >=. Así:
@container (aspect-ratio <= 1/3) {
/* ... */
}
La orientación del contenedor
Los contenedores también admiten como condicional el tipo de orientación que tienen; esto se consigue con la característica orientation. Esta característica será especialmente útil en dispositivos móviles o pantallas que pueden rotar 90 grados, así se adapta el contenido según convenga.
Se puede definir dos valores para la orientación:
| Valor | Descripción |
|---|---|
portrait | El contenedor está en vertical. |
landscape | El contenedor está en horizontal. |
Por ejemplo:
@container (orientation: landscape) {
/* ... */
}
Anidación de contenedores
Hay que tener en cuenta que no es posible apuntar a múltiples contenedores a la vez en una misma consulta de @container. No obstante, sí que es posible anidar consultas de contenedores, lo que tiene el mismo efecto.
En el siguiente ejemplo, la consulta será verdadera —y por tanto, aplicará los estilos definidos— si el contenedor llamado «lateral» tiene una anchura superior a los 500 píxeles y tiene a su vez un contenedor más ancho de 1000 píxeles.
@container lateral (min-width: 500px) {
@container (min-width: 1000px) {
/* ... */
}
}
Unidades de longitud para contenedores
Dentro de la regla arroba @container es posible utilizar unidades relativas a su contenedor. Se trata de unas unidades muy útiles, pues permiten indicar una longitud que depende del tamaño [variable] del contenedor.
Así, por ejemplo, para indicar un porcentaje relativo a la anchura del elemento contenedor se usará la unidad cqw (container query width), mientras que para la altura se usará la unidad cqh (container query height).
| Unidad | Descripción |
|---|---|
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 de bloque. |
cqmin | El valor más pequeño entre cqi y cqb. |
cqmax | El valor más alto entre cqi y cqb. |
Aquellos elementos que utilizan unidades de longitud relativas a su elemento contenedor (padre), permite una mayor flexibilidad para ser usados en distintos contenedores, sin que esto obligue a recalcular valores de longitud.
