Les requêtes de conteneurs arrivent sur des navigateurs stables

En cette Saint-Valentin, nous célébrons l'arrivée des requêtes de taille de conteneur et des unités de requête de conteneur dans tous les navigateurs stables.

Una Kravets

L'amour des requêtes de conteneur est dans l'air ! En cette Saint-Valentin, les requêtes de taille de conteneur et les unités de requête de conteneur sont stables dans tous les navigateurs modernes.

Les requêtes de conteneur vous permettent d'interroger les informations de style d'un élément parent, comme son inline-size. Avec les requêtes multimédias, vous pouvez interroger la taille de la fenêtre d'affichage. Les requêtes de conteneur permettent d'utiliser des composants qui peuvent changer en fonction de leur emplacement dans l'interface utilisateur.

Les requêtes de conteneur sont particulièrement utiles pour le responsive design et les composants réutilisables. Par exemple, vous pouvez activer un composant de carte qui peut se présenter d'une manière différente lorsqu'il est placé dans une barre latérale et dans une configuration différente dans une grille de produits.

Utiliser des requêtes de conteneur

Pour utiliser des requêtes de conteneur, définissez d'abord la structuration sur un élément parent. Pour ce faire, définissez un container-type sur le conteneur parent ou utilisez l'abréviation container pour lui attribuer à la fois un type et un nom:

.card-container {
  container: card / inline-size;
}

Définir container-type sur inline-size interroge la taille de la direction en ligne du parent. Dans les langues latines comme l'anglais, il s'agit de la largeur de la fiche, car le texte s'affiche en ligne de gauche à droite.

Vous pouvez désormais utiliser ce conteneur pour appliquer des styles à n'importe lequel de ses enfants à l'aide de @container:

.card-child {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
 .card-child {
  grid-template-columns: 1fr;
 }
}

Vous pouvez également utiliser des valeurs d'unités de longueur de requête de conteneur de la même manière que les valeurs d'unités basées sur la fenêtre d'affichage. La différence est que les unités de conteneur correspondent au conteneur plutôt qu'à la fenêtre d'affichage. L'exemple suivant illustre la typographie responsive à l'aide d'unités de requête de conteneur et de la fonction clamp() pour définir une valeur de taille minimale et maximale:

.card-child h2 {
  font-size: clamp(2rem, 15cqi, 4rem);
}

15cqi ci-dessus fait référence à 15% de la taille intégrée du conteneur. La fonction clamp() lui attribue une valeur minimale de 2 rem et une valeur maximale de 4 rem. En attendant, si 15cqi se situe entre ces valeurs, le texte se réduit et se développe en conséquence.

Requête de conteneur pour la Saint-Valentin

Pour célébrer l'amour des requêtes de conteneur en cette période de fête, nous avons créé une carte de Saint-Valentin que vous pouvez tous apprécier, quel que soit le navigateur stable (dernière version) que vous utilisez pour la lire.