À 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 sur tous les navigateurs stables.
Une requête de conteneur est dans l'air ! À l'occasion de la Saint-Valentin, les requêtes des conteneurs de taille 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 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'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 Fiche qui peut être mis en page d'une manière lorsqu'il est placé dans une barre latérale, et dans une configuration différente au sein d'une grille de produits.
Utiliser des requêtes de conteneur
Pour utiliser des requêtes de conteneur, commencez par définir le confinement sur 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;
}
La définition de container-type sur inline-size interroge la taille de direction intégrée du parent. Pour les langues latines comme l'anglais, cette valeur correspond à la largeur de la fiche, car le texte est aligné de gauche à droite.
Vous pouvez maintenant 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;
}
}
De plus, vous pouvez utiliser les valeurs d'unité de longueur de requête du conteneur de la même manière que vous le feriez pour des valeurs d'unité basées sur une fenêtre d'affichage. La différence réside dans le fait que les unités de conteneur correspondent au conteneur et non à la fenêtre d'affichage. L'exemple suivant illustre une typographie responsive utilisant des unités de requête de conteneur et la fonction clamp() pour attribuer une valeur de taille minimale et maximale:
.card-child h2 {
font-size: clamp(2rem, 15cqi, 4rem);
}
L'élément 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 2rem et un maximum de 4rem. En attendant, si 15cqi est compris entre ces valeurs, le texte se rétrécit et s'agrandit en conséquence.
Requête de conteneur "Valentine"
Pour fêter l'amour des requêtes de conteneur, nous avons créé une St-Valentin pour tous, quel que soit le navigateur stable dans lequel vous le consultez.