Introduction au container query css

• CSS
• Dev
• Tuto

Hello les ami.e.s !
Aujourd’hui je vais vous faire un petit article sur les containers queries. Accrochez votre ceinture :)

Problématique

Il y a peu de temps, j’ai été confronté à une problématique dans mon travail. On m’a demandé de créer un composant Twig. Il fallait qu’il soit adaptable en desktop et mobile. Je me suis dit : ok easyyy ! Un p’tit coup de media queries et le tour est joué :) La vie est belle quoi. Mais là, je vois la ligne en dessous sur le ticket Jira : Ha, et il faut qu’on puisse le mettre aussi dans une sidebar en affichage mobile. Bon, autant vous dire que mes plans étaient devenus quelque peu foireux. J’aurais bien pu passer un paramètre dans mon composant Twig genre mobile ou desktop, mais pour l’avoir déjà fait, c’est pas hyper fifou.

Et c’est là que les containers queries sortent du chapeau !

Pour répondre à ça, j’ai utilisé les containers queries. En fait, j’avais déjà repéré cette technique CSS dans un article sur FrontendMasters (https://frontendmasters.com/blog/container-queries-and-units/) en décembre 2023. Mais je n’avais jamais tenté son utilisation. De mémoire, je crois que ce n’était pas disponible encore sur tous les navigateurs à ce moment-là, mais je ne mettrais pas ma main à couper ^^

Dis, c’est quoi la différence entre les médias queries et les containers queries ?

La réponse est simple : les médias queries vous permettront d’utiliser la résolution de l’écran en point de référence tandis que les containers queries utiliseront le container parent en référence. En gros dans mon cas, je ne peux pas utiliser les médias queries car mon composant devra s’afficher en version mobile alors que j’affiche une version desktop. Mon composant serait totalement pété dans la sidebar !

Comment que ca marche-t’y donc ?

Déjà, je vous mets en garde tout de suite : cet article n’est pas un tutoriel complet sur les containers queries mais seulement (et c’est déjà pas mal hein !) pour vous mettre un pied à l’étrier. Je ne remplacerais pas la documentation MDN. El Famous RTFM :P

Mettons-nous en situation et partons du même principe avec un élément main et un élément aside avec un width totalement arbitraire de 350px.

Voici la tête de mon « composant » :

<div class="main-component">
    <div class="component">
        <img src="https://cataas.com/cat?width=300&height=300" alt="">
        <p>My legend</p>
    </div>
</div>

 

A noter, instant promo, cataas.com est un super site d’image de chat pour vos placeholders :) C’est gratuit, allez-y !

 

Je dois d’abord donner un nom et un type de comportement à mon container query :

.main-component {
    container-name: myComponent;
    container-type: inline-size;
}

Je définis le type en inline-size car je veux checker le comportement sur le width (si j’ai bien activé tous mes neurones :P) N’hésitez pas à dire en commentaire si besoin.

Le nom va me permettre de définir un comportement pour ce bloc de code et pas un autre.

Maintenant, je veux dire que mon bloc se comporte comme ceci : 

• l’image doit être en format petit et arrondi
• le nom sur la droite de l’image

Bon c’est simple, en mobile first, on va directement le définir comme ça :

.component {
    display: flex;
    align-items: center;
    gap: 16px;
    img {
        width: 100px;
        height: 100px;
        border-radius: 100%;
    }
}

Maintenant, je veux que, lorsque mon bloc s’affiche dans un espace de plus de 350px (donc plus grand que mon aside) :

• l’image doit faire 300px en width et height
• un border-radius de 16px
• le texte dois s’afficher dessous et centrer sous l’image.

On écrira du coup le code suivant :

@container myComponent (min-width: 351px) {
    .component {
        display: inline-block;
        text-align: center;
        img {
            width: 300px;
            height: 300px;
            border-radius: 16px;
        }
    }
}

@container rappelle l’utilisation du @media. On appelle le nom myComponent défini dans container-name plus haut. Et enfin le reste du code vous comprenez :)

Vous voyez, rien de bien compliqué.

Je vous ai fait un CodePen très rapide pour les besoins de l’article. N’hésitez pas à le checker (et checker mes autres Pen si vous savez pas quoi faire ou si vous êtes curieux ^^ Vous n’imaginez pas tout ce que l’on peut faire avec le CSS :)

 

See the Pen Introduce to Containers queries by Stephane (@Tef) on CodePen.

 

Les commentaires sont ouverts si vous avez besoin de vous exprimer, m’envoyer du love ou me rendre riche et célèbre (ouais, là non, je ne pense pas).

Merci les ami.e.s et à bientôt !

 

Longue vie et Prospérité