Les requêtes de conteneur et :has() sont des correspondances parfaites. Heureusement, ces deux fonctionnalités sont disponibles ensemble dans Chromium 105. Il s'agit d'une énorme version 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. Ainsi, un élément enfant peut posséder sa logique de style responsif, quel que soit son emplacement sur une page Web.
Au lieu de s'appuyer sur la fenêtre d'affichage pour définir le style des entrées telles que l'espace disponible, les développeurs peuvent désormais interroger également la taille des éléments sur la page. Cette capacité signifie qu'un composant possède sa logique de style responsif. Cela rend le composant beaucoup plus résilient, car la logique de style lui est associée, quel que soit son emplacement sur la page.
Utiliser des requêtes de conteneur
Pour effectuer une compilation 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 pouvez avoir une fiche avec une image et du contenu textuel semblable à celui-ci:
Pour créer une requête de conteneur, définissez container-type sur le conteneur de la carte:
.card-container {
container-type: inline-size;
}
La définition de container-type sur inline-size permet d'interroger la taille de l'orientation intégrée du parent. Dans les langues latines comme l'anglais, cette largeur correspond à la largeur de la carte, car le texte est aligné de gauche à droite.
Nous pouvons maintenant utiliser ce conteneur pour appliquer des styles à n'importe lequel de ses enfants à l'aide de @container:
.card {
display: grid;
grid-template-columns: 1fr 1fr;
}
@container (max-width: 400px) {
.card {
grid-template-columns: 1fr;
}
}
Sélecteur de 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) qui contient un span. Vous pouvez l'utiliser pour appliquer un style au paragraphe parent lui-même, ou à tout élément qu'il contient. figure:has(figcaption) permet, par exemple, de styliser 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 des parents de :has() avec ceux des requêtes de conteneur pour créer des styles intrinsèques très dynamiques.
Développons le premier exemple avec la fiche "fusée". Que se passe-t-il si votre carte n'inclut pas d'image ? Vous pouvez peut-être augmenter la taille du titre et ajuster la mise en page de la grille à une seule colonne afin qu'elle semble plus intentionnelle 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 à une seule colonne. En outre, la carte sans image a un titre plus grand. Pour écrire cela à 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. Cette spécification est identique à celle de :has(), mais elle 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 définit le style d'un h1 dans une fiche 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 présente une combinaison de :has(), :not() et @container, mais les requêtes de conteneur sont très efficaces lorsque le même élément est utilisé à plusieurs endroits. Ajoutons une touche de style et affichons ces fiches dans une grille les unes à côté des autres.
Vous pouvez désormais voir toute la puissance du CSS moderne. Nous pouvons écrire des styles clairs à l'aide de styles ciblés qui créent une logique basée sur la logique et créent des composants vraiment robustes. Avec le lancement de ces deux puissantes fonctionnalités dans Chromium 105 et l'émergence de la compatibilité multinavigateur, nous entrons dans une période passionnante pour les développeurs d'interfaces utilisateur.