Este año 2023 ya es posible usar los container queries en nuestros proyectos de CSS, debido a que la mayoría de los navegadores ya lo soportan, se ve bastante genial pero ¿cómo implementarlo?
Vamos a ello 🫡!
Primero, tenemos que tener claro cuál va a ser nuestro elemento HTML "contenedor", en este caso vamos a tener un elemento div
con la clase "contenedor" (muy original 😶🌫️), lo he colocado en esta etiqueta porque quiero aplicar mis estilos sobre <section>
.
<div class="contenedor">
<section>
<p>Párrafo 1</p>
<p>Párrafo 2</p>
</section>
</div>
Bien! con el HTML listo ahora vamos a declararlo en nuestra hoja de estilos, podemos tener "contenedores anónimos" o también podemos nombrarlos, en este caso vamos a ejemplificar uno con nombre.
A la clase .contenedor
debemos entregarle dos propiedades:
- container-name: nombre de nuestro container query.
-
container-type: cómo va comportarse con respecto al "tipo de tamaño" que tendrá nuestro contenedor, que puede ser
size
oinline-size
.
Valores del container-type:
- size: considera eje x y eje y, es decir, se va a extender tanto en alto y ancho con respecto al contenedor.
- inline-size: considera el eje y, es decir, sólo se va a extender a lo ancho con respecto al contenedor y no considerará el alto.
Nuestro css debería verse así:
.contenedor {
container-name: mobile;
container-type: inline-size;
}
Listo, le hemos entregado las dos propiedades que necesitábamos, también tenemos la forma corta/shorthand de escribirlo 👇:
.contenedor {
container: mobile / inline-size;
}
Ahora, al declarar nuestro container-query recién creado, el patrón sería el siguiente 👇:
@container
+ nombre del contendor
+ rango del contenedor
En este caso he utilizado el "range-syntax" para indicar que desde 1024px hacia abajo se active la propiedad.
Dentro de este vamos a colocar los estilos que necesitamos:
@container mobile (width <= 1024px) {
section{
background-color: red
}
p {
color: pink
}
}
¿Cómo "debuggear" mis container queries 🐛?
Si estás usando el browser google chrome, al inspeccionar el sitio web te aparecerá destacado container
y allí puedes ver incluso el nombre del container-query aplicado cuando te posicionas sobre el elemento hijo ✨
He preparado un pequeño codepen con este mismo ejemplo para que puedas jugar y probar esta nueva regla tu mismo 😊.
*Nota: si estás usando visual studio code probablemente te vas a encontrar con el warning: "Unknown at rule @container"
, no te preocupes que ya se levantó el issue con el equipo de VSC y funcionará igualmente.
Espero que te haya ayudado ✨!
Top comments (4)
Re buena la explicación :D
👏👏
Excelente!! Ahora me queda mucho más claro el uso de los container queries, vamos a ver cuando lo puedo poner en práctica! :D
Excelente material y muy buena la explicación !!