Les requêtes de conteneurs arrivent sur des navigateurs stables

À l'occasion de la Saint-Valentin, nous célébrons les requêtes de conteneur de taille et les unités de requête de conteneur qui arrivent dans tous les navigateurs stables.

Una Kravets

Les requêtes de conteneur sont déjà dans l'air ! Pour la Saint-Valentin, les requêtes de conteneur de taille et les unités de requête de conteneur restent stables dans tous les navigateurs récents.

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

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 Fiche qui peut s'afficher dans un sens 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 le confinement d'un élément parent. Pour ce faire, définissez un container-type sur le conteneur parent ou utilisez le raccourci container pour lui attribuer simultanément un type et un nom:

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

Définir container-type sur inline-size interroge la taille de l'orientation intégrée du parent. Pour les langues latines comme l'anglais, il s'agit de la largeur de la carte, car le texte s'affiche de gauche à droite.

Vous pouvez maintenant utiliser ce conteneur pour appliquer des styles à tous 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;
 }
}

De plus, vous pouvez utiliser des valeurs unitaires de longueur de requête de conteneur de la même manière que des valeurs unitaires basées sur la fenêtre d'affichage. La différence réside dans le fait que les unités du conteneur correspondent au conteneur et non à la fenêtre d'affichage. L'exemple suivant illustre une typographie responsive en utilisant des unités de requête de conteneur et la fonction clamp() pour attribuer des valeurs de taille minimale et maximale:

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

La valeur 15cqi ci-dessus correspond à 15% de la taille intégrée du conteneur. La fonction clamp() lui donne une valeur minimale de 2 rem et un maximum de 4 rem. En attendant, si 15cqi est compris entre ces valeurs, le texte sera réduit et développé en conséquence.

Une requête de conteneur (Valentine)

Pour célébrer les fêtes de fin d'année, nous avons créé une carte de la Saint-Valentin, quel que soit le navigateur stable (dernière version) que vous utilisez.