Les requêtes de conteneur et :has() sont la combinaison parfaite. Heureusement, ces deux fonctionnalités arrivent ensemble dans Chromium 105. Il s'agit d'une version majeure avec deux fonctionnalités très demandées pour les interfaces réactives !
Requêtes de conteneur: bref résumé
Les requêtes de conteneur permettent aux développeurs d'interroger un sélecteur parent pour connaître sa taille et ses informations de style. Un élément enfant peut ainsi posséder sa logique de style responsif, quel que soit l'endroit où il se trouve sur une page Web.
Au lieu de s'appuyer sur la fenêtre d'affichage pour styliser les données d'entrée telles que l'espace disponible, les développeurs ont désormais la possibilité d'interroger la taille des éléments sur la page. Cela signifie qu'un composant possède sa logique de style responsif. Le composant est ainsi beaucoup plus résilient, car la logique de style lui est associé, quel que soit l'endroit où il apparaît sur la page.
Utiliser des requêtes de conteneur
Pour compiler avec des requêtes de conteneur, vous devez d'abord définir le confinement sur un élément parent. Pour ce faire, définissez un container-type sur le conteneur parent. Vous avez peut-être une fiche contenant une image et du texte, qui se présente comme suit:
Pour créer une requête de conteneur, définissez container-type sur le conteneur de la carte:
.card-container {
container-type: inline-size;
}
Définir container-type sur inline-size interroge la taille de l'orientation intégrée du parent. Dans les langues latines comme l'anglais, il s'agit de la largeur de la carte, car le texte s'affiche de gauche à droite.
Nous pouvons maintenant utiliser ce conteneur pour appliquer des styles à tous ses enfants à l'aide de @container:
.card {
display: grid;
grid-template-columns: 1fr 1fr;
}
@container (max-width: 400px) {
.card {
grid-template-columns: 1fr;
}
}
Le sélecteur parent :has()
La pseudo-classe CSS :has() permet aux développeurs de vérifier si un élément parent contient des enfants avec des paramètres spécifiques.
Par exemple, p:has(span) indique un sélecteur de paragraphe (p) contenant un span. Vous pouvez l'utiliser pour appliquer un style au paragraphe parent ou à n'importe quel élément qu'il contient. figure:has(figcaption) permet par exemple d'appliquer un style à un élément figure contenant une légende. Pour en savoir plus sur :has(), consultez cet article de Jhey Tompkins.
Requêtes de conteneur et :has()
Vous pouvez combiner les pouvoirs de sélection parent de :has() avec les pouvoirs de requête parents des requêtes de conteneur pour créer des styles intrinsèques vraiment dynamiques.
Développons le premier exemple avec la fiche "fusée". Et si vous aviez une carte sans image ? Peut-être souhaitez-vous augmenter la taille du titre et ajuster la mise en page de la grille à une seule colonne afin qu'il semble plus intentionnel sans l'image.
Dans cet exemple, la carte avec une image a un modèle de grille à deux colonnes, tandis que la carte sans image a une mise en page en une seule colonne. De plus, la carte sans image a un en-tête plus grand. Pour écrire ceci à l'aide de :has(), utilisez le CSS suivant.
.card:has(.visual) {
grid-template-columns: 1fr 1fr;
}
Vous recherchez un élément avec une classe de visual pour appliquer le style à deux colonnes ci-dessus. :not() est une autre fonction CSS intéressante. Il s'agit de la même spécification que :has(), mais il existe depuis beaucoup plus longtemps et offre une meilleure compatibilité avec les navigateurs. Vous pouvez même combiner :has() et :not(), comme suit:
.card:not(:has(.visual)) h1 {
font-size: 4rem;
}
Dans le code ci-dessus, vous écrivez un sélecteur qui applique un style à un h1 dans une carte qui ne contient pas de classe visual. C'est ainsi que vous pouvez ajuster très
clairement la taille de la police.
Synthèse
La démonstration ci-dessus montre une combinaison de :has(), :not() et @container, mais les requêtes de conteneur sont particulièrement utiles lorsque le même élément est utilisé à plusieurs endroits. Apportons une touche de style en présentant ces cartes sous forme de grille l'une à côté de l'autre.
Vous voyez maintenant vraiment toute la puissance du CSS moderne. Nous pouvons écrire des styles clairs à l'aide de styles ciblés qui construisent une logique sur la logique et créent des composants très robustes. Avec l'arrivée de ces deux fonctionnalités puissantes dans Chromium 105 et la prise en charge de plusieurs navigateurs, le moment est particulièrement passionnant pour les développeurs d'interfaces utilisateur !