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 `

`. ```html

Párrafo 1

Párrafo 2

``` 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í: ```css .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 👇: ```css .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_"](https://caniuse.com/css-media-range-syntax) para indicar que desde 1024px hacia abajo se active la propiedad. Dentro de este vamos a colocar los estilos que necesitamos: ``` css @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 ✨ ![Imagen ilustrando como revisar container-queries en google chrome](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mgxjx574iin9jdoo57bb.png) He preparado un pequeño codepen con este mismo ejemplo para que puedas jugar y probar esta nueva regla tu mismo 😊. {% codepen https://codepen.io/dereemii/pen/BaqqXGg %} --- *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 ✨!

dereemii

¿Cómo usar Container Queries?

Join Our Newsletter. No Spam, Only the good stuff.