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

Sofia Emelianova

Jecelyn Yeen

Ce guide vous 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 de l'élément en fonction des propriétés de son conteneur parent. Cette capacité a fait passer le concept de Responsive Web Design de basé sur les pages à 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

Chaque élément défini en tant que conteneur de requête est associé à un badge container dans le panneau Éléments. Le badge vous permet d'afficher une superposition en pointillés du conteneur et de ses descendants.

Pour afficher ou masquer la superposition:

1. Ouvrez les 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 forme de bloc. Il commence sur une nouvelle ligne et occupe toute la largeur.
• Plus de 600px: les descendants adoptent une mise en page en grille horizontale avec le titre (h1) en haut et l'image (img) sur la gauche.

Pour inspecter la première déclaration @container, procédez comme suit:

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 ainsi qu'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 déclenché la requête, pointez sur le nom de l'élément au-dessus de la déclaration @container et cliquez dessus.

Lorsque vous passez la souris dessus, le nom se transforme en lien vers l'élément du panneau Éléments, et le volet Styles affiche la propriété interrogée et sa valeur actuelle.

Modifier les requêtes de conteneur

Pour déboguer une requête, vous pouvez la modifier comme n'importe quelle autre déclaration CSS dans le volet Styles, comme décrit dans la section Afficher et modifier le code CSS.

Dans cet exemple, la largeur du conteneur est 500px. L'élément de paragraphe (p) s'affiche sur la page.

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