Inspecter et déboguer les requêtes de conteneur CSS

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:

1. Accédez aux Outils de développement.
2. 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:

1. Dans le panneau Éléments, définissez la largeur du conteneur sur 500px. L'élément p s'affiche.

2. Sélectionnez l'élément p. Dans le volet Styles, vous pouvez voir la déclaration @container avec un lien vers le conteneur parent article.card.

   

3. 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.

1. Sélectionnez l'élément p. Dans le volet Styles. Vous pouvez consulter la déclaration @container (inline-size > 400px).
2. Remplacez la valeur 400px de inline-size par 520px.
3. L'élément de paragraphe (p) disparaît de la page, car il ne répondait pas aux critères de la requête.