Ce guide explique comment inspecter et déboguer les requêtes de conteneur CSS dans le panneau Éléments des outils pour les développeurs Chrome.
Les requêtes de conteneur CSS vous permettent de manipuler les styles d'un élément en fonction de ses propriétés de conteneur parent. Grâce à cette fonctionnalité, le concept de Responsive Web Design est remplacé par un modèle basé sur des conteneurs.
Les captures d'écran de ce guide proviennent de cette page de démonstration.
Découvrir les conteneurs et leurs descendants
Un badge container
est associé à chaque élément défini comme conteneur de requête dans le panneau Éléments. Le badge active ou désactive une superposition en pointillés du conteneur et de ses descendants.
Pour activer/désactiver la superposition:
- Accédez aux Outils de développement.
- Dans le panneau Éléments, cliquez sur le badge
container
à côté de l'élément défini en tant que conteneur.
Dans cet exemple, la propriété container-type: inline-size
définit l'élément conteneur. Les descendants peuvent interroger sa dimension intégrée (axe horizontal) et modifier leurs styles en fonction de la largeur du conteneur.
Inspecter les requêtes de conteneur
Le panneau Éléments affiche les déclarations de requête @container
lorsqu'elles sont appliquées à un élément descendant, c'est-à-dire lorsque le conteneur remplit la condition de la requête.
Pour savoir quand inspecter les déclarations @container
sur cette page de démonstration, examinez l'exemple de code suivant:
@container (inline-size > 400px) {
.coffee p {
display: block;
}
}
@container (inline-size > 600px) {
.coffee {
display: grid;
grid-template-columns: 280px auto;
}
.coffee h1 {
grid-column: 1/3;
}
.coffee img {
grid-row: 2/4;
}
Dans cet exemple, si la largeur du conteneur dépasse le nombre de pixels suivant, les styles correspondants s'appliquent:
- Plus de
400px
: l'élément de paragraphe (p
) apparaît sur la page sous la forme d'un bloc. Il commence sur une nouvelle ligne et occupe toute la largeur. - Plus de
600px
: les descendants adoptent une mise en page sous forme de grille horizontale avec le titre (h1
) en haut et l'image (img
) à gauche.
Pour inspecter la première déclaration @container
:
- Dans le panneau Éléments, définissez la largeur du conteneur sur
500px
. L'élémentp
s'affiche. Sélectionnez l'élément
p
. Dans le volet Styles, vous pouvez voir la déclaration@container
avec un lien vers le conteneur parentarticle.card
.Définissez la largeur sur une valeur supérieure à
600px
, puis sélectionnez l'un des éléments concernés. Observez les déclarations@container
qui implémentent une mise en page horizontale.
Rechercher des éléments de conteneur
Pour rechercher et sélectionner un élément de conteneur ayant entraîné l'application de la requête, pointez sur le nom de l'élément et cliquez dessus au-dessus de la déclaration @container
.
Lorsque vous pointez dessus, le nom se transforme en lien vers l'élément dans le panneau Éléments, et le volet Styles affiche la propriété interrogée et sa valeur actuelle.
Modifier les requêtes du conteneur
Pour déboguer une requête, vous pouvez la modifier comme n'importe quelle autre déclaration CSS dans le volet Styles, comme indiqué dans la section Afficher et modifier le CSS.
Dans cet exemple, la largeur du conteneur est de 500px
. L'élément de paragraphe (p
) apparaît sur la page.
- Sélectionnez l'élément
p
. Dans le volet Styles. Vous pouvez consulter la déclaration@container (inline-size > 400px)
. - Remplacez la valeur
400px
deinline-size
par520px
. - L'élément de paragraphe (
p
) disparaît de la page, car il ne répondait pas aux critères de la requête.