Requêtes de conteneur CSS

Utiliser les requêtes de taille de conteneur

Alors que les requêtes de conteneur appliquent des styles en fonction du nom ou du type du conteneur, les requêtes de taille de conteneur appliquent des styles spécifiquement en fonction des dimensions du conteneur. Pour utiliser les requêtes de taille de conteneur, vous devez déclarer un contexte de compartimentation sur un élément afin que le navigateur sache que vous voulez interroger les dimensions de ce conteneur plus tard. Pour ce faire, utilisez la propriété container-type avec une valeur de size, inline-size ou normal.

Ces valeurs ont les effets suivants :

size

La requête est basée sur les dimensions en ligne et en bloc du conteneur. Applique la mise en page, le style et la compartimentation de taille au conteneur.

inline-size

La requête est basée sur les dimensions en ligne du conteneur. Applique la mise en page, le style et la compartimentation de la taille en ligne à l'élément.

normal

La valeur par défaut. L'élément n'est pas un conteneur de requête pour les requêtes de taille de conteneur, mais peut toujours être utilisé comme conteneur de requête pour les requêtes de conteneur basées sur le nom ou les requêtes de style de conteneur.

Considérons l'exemple suivant d'un composant de carte pour un article de blog avec un titre et du texte :

<div class="sujet">
  <div class="carte">
    <h2>Titre de la carte</h2>
    <p>Contenu de la carte</p>
  </div>
</div>

Vous pouvez créer un contexte de compartimentation en utilisant la propriété container-type :

.sujet {
  container-type: inline-size;
}

Ensuite, utilisez la règle @container pour définir une requête de conteneur. La requête dans l'exemple suivant applique des styles aux éléments en fonction de la taille de l'ancêtre le plus proche ayant un contexte de compartimentation. Plus précisément, cette requête applique une taille de police plus grande pour le titre de la carte si le conteneur est plus large que 700px :

/* Styles par défaut pour le titre de la carte */
.carte h2 {
  font-size: 1em;
}

/* Si le conteneur est plus large que 700px */
@container (width > 700px) {
  .carte h2 {
    font-size: 2em;
  }
}

En utilisant les requêtes de conteneur, la carte peut être réutilisée dans plusieurs zones d'une page sans avoir besoin de savoir exactement où elle est placée à chaque fois. Si le conteneur avec la carte est plus étroit que 700px, la police du titre de la carte est petite, et si la carte se trouve dans un conteneur plus large que 700px, la police du titre de la carte est plus grande.

Pour plus d'informations sur la syntaxe des requêtes de conteneur, consultez la page @container.

Nommer les contextes de compartimentation

Dans la section précédente, une requête de conteneur appliquait des styles en fonction de l'ancêtre le plus proche ayant un contexte de compartimentation. Il est possible de donner un nom à un contexte de compartimentation en utilisant la propriété container-name. Une fois nommé, le nom peut être utilisé dans une requête @container afin de cibler un conteneur spécifique. L'exemple suivant crée un contexte de compartimentation avec le nom barre-laterale :

.sujet {
  container-type: inline-size;
  container-name: barre-laterale;
}

Vous pouvez ensuite cibler ce contexte de compartimentation en utilisant la règle @container :

@container barre-laterale (width > 700px) {
  .carte {
    font-size: 2em;
  }
}

Pour plus d'informations sur la nomination des contextes de compartimentation, consultez la page container-name.

Requêtes de conteneur avec seulement un nom

En plus d'utiliser un nom de conteneur (container-name) avec une <container-query>, vous pouvez interroger un conteneur en utilisant uniquement son nom. Ces requêtes dites de conteneur avec seulement un nom permettent d'appliquer sélectivement des styles aux éléments en fonction de la présence d'un ancêtre avec un container-name spécifique.

Par exemple, considérez le HTML suivant :

<div id="conteneur">
  <p>Je suis dans le conteneur.</p>
  <p>Je suis aussi dans le conteneur.</p>
</div>
<p>Je ne suis pas dans le conteneur.</p>

Si nous attribuons un nom au conteneur :

#conteneur {
  container-name: mon-conteneur;
}

Vous pouvez ensuite appliquer des styles de manière sélective uniquement aux éléments à l'intérieur de ce conteneur :

@container mon-conteneur {
  p {
    background-color: lime;
    font-size: 1.3rem;
    width: 50vw;
    padding: 0.5rem;
    font-family: sans-serif;
  }
}

Dans cet exemple, les styles définis seraient appliqués uniquement aux premier et deuxième éléments <p>, mais pas au troisième.

Syntaxe raccourcie des conteneurs

La manière raccourcie de déclarer un contexte de compartimentation est d'utiliser la propriété container :

.sujet {
  container: barre-laterale / inline-size;
}

Pour plus d'informations sur cette propriété, consultez la référence container.

Unités de longueur des requêtes de conteneur

Lors de l'application de styles aux descendants d'un conteneur en utilisant des requêtes de conteneur de taille (c'est-à-dire que son container-type est défini sur size ou inline-size), vous pouvez utiliser des unités de longueur de requête de conteneur. Ces unités définissent une longueur relative aux dimensions d'un conteneur de requête. Les composants qui utilisent des unités de longueur relatives à leur conteneur sont plus flexibles à utiliser dans différents conteneurs sans avoir à recalculer des valeurs de longueur concrètes.

Si aucun conteneur éligible n'est disponible pour la requête, l'unité de longueur de la requête de conteneur par défaut est l'unité de petite zone d'affichage pour cet axe (sv*).

Les unités de longueur des requêtes de conteneur sont :

• cqw : 1% de la largeur d'un conteneur de requête
• cqh : 1% de la hauteur d'un conteneur de requête
• cqi : 1% de la taille en ligne d'un conteneur de requête
• cqb : 1% de la taille en bloc d'un conteneur de requête
• cqmin : La plus petite valeur entre cqi et cqb
• cqmax : La plus grande valeur entre cqi et cqb

L'exemple suivant utilise l'unité cqi pour définir la taille de la police d'un titre en fonction de la taille en ligne du conteneur :

@container (width > 700px) {
  .sujet h2 {
    font-size: max(1.5em, 1.23em + 2cqi);
  }
}

Pour plus d'informations sur ces unités, consultez la référence Unités de longueur des requêtes de conteneur.

Solutions de repli pour les requêtes de conteneur

Pour les navigateurs qui ne prennent pas encore en charge les requêtes de conteneur, grid et flex peuvent être utilisés pour créer un effet similaire pour le composant de carte utilisé sur cette page. L'exemple suivant utilise une déclaration grid-template-columns pour créer une mise en page à deux colonnes pour le composant de carte.

.sujet {
  display: grid;
  grid-template-columns: 2fr 1fr;
}

Si vous souhaitez utiliser une mise en page à une seule colonne pour les appareils avec une zone d'affichage plus petite, vous pouvez utiliser une requête média pour modifier le modèle de grille :

@media (width <= 700px) {
  .sujet {
    grid-template-columns: 1fr;
  }
}

Voir aussi

• Les requêtes média
• La règle @container
• La propriété contain
• La propriété raccourcie container
• La propriété container-name
• La propriété content-visibility
• Utiliser les requêtes de taille et de style des conteneurs
• Utiliser les requêtes d'état de défilement des conteneurs
• Utiliser les requêtes de conteneur ancrées
• Dites Bonjour aux requêtes de conteneur CSS ^(angl.) par Ahmad Shadeed
• Requêtes de conteneur : guide de démarrage rapide ^(angl.)
• Collection d'articles sur les requêtes de conteneur ^(angl.)