¿Cómo usar Container Queries?

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 o inline-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 ✨!