Les Container Queries en CSS

Dans ce tutoriel, nous voyons comment gérer la taille des contenus en fonction de la taille de leur parent avec les container queries en CS3.

Article conseillé avant de lire celui-ci : https://nouvelle-techno.fr/articles/mobile-first-et-media-queries-les-bonnes-pratiques 

Les Container Queries - c'est quoi ?

Il s'agit d'une fonctionnalité du CSS qui va permettre de créer l'équivalent des médias queries mais pour des éléments de notre page. On pourra ainsi mettre en place des propriétés CSS pour un élément en fonction de la taille de son parent et non de la fenêtre entière.

Le HTML

Dans une simple une page html, nous avons une section. Dans cette section nous créons une div (utilisez votre propre sémantique en fonction du contexte), cette div contient un texte exemple.

<main>

    <section id="section1">

        <div class="content">

            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates vero nemo architecto quae velit molestias repellendus, commodi voluptatum quos, dolore quisquam tempora? Ab pariatur ipsum minima possimus mollitia alias suscipit blanditiis officia, neque repellat aliquam harum at cupiditate nemo ea nihil illo consequuntur atque perferendis aspernatur? Minus magni ipsa laborum?

        </div>

    </section>

</main>

Le CSS

Nous allons donner à notre section section1 la largeur de 50% de son parent.

#section1{

    width: 50%;

}

Ensuite, nous allons définir le type de “container” que sera cette section

Les options principales sont les suivantes :

size la requête se basera sur les dimensions inline et block du conteneur, soit la largeur et la hauteur

inline-size la requête se basera sur la dimension inline du conteneur (largeur dans la majorité des cas)

normal l'élément ne sera pas un conteneur affecté par les container queries

Dans cet exemple, on utilisera inline-size, le CSS devient donc

#section1{

    width: 50%;

    container-type: inline-size;

}

On pourra ensuite se baser sur la largeur de cette section pour définir la mise en forme de la div qu'elle contient.

Par exemple, si la largeur de la section est supérieure à 250px, on écrira le texte de la div en bleu, donnera ce code

@container (width > 250px){

    .content{

        color: blue;

    }

}

Vous pourrez trouver plus de détails dans la vidéo.

Obtenir de l'aide

Serveur Discord : https://discord.gg/8DcaQehcvE