Écrivez moins de CSS en utilisant les pseudo-classes :is(), :where() et :has()

CSS a beaucoup évolué au fil des années. Il introduit de nombreux nouveaux outils puissants qui facilitent la vie. Parmi ces outils, j’en ai sélectionné aujourd’hui trois. Nous verrons comment les pseudo-classes :is(), :has() et :where() aident à simplifier le code, à le rendre plus lisible et à réduire les répétitions.

Cet article vous apprend quoi, comment et pourquoi des pseudo-classes :is(), :where() et :has(). Vous verrez comment nous pouvons utiliser ces pseudo-classes pour concevoir notre site internet en écrivant de moins en plus de code optimisé, ce qui peut être une excellente pratique en développement logiciel.

Comme nous allons explorer les pseudo-classes, voici un aperçu de base en une phrase. En CSS, la pseudo-classe est une règle qui s'applique à un élément en fonction d'une certaine condition ou d'un certain état. Suivez ce lien pour en savoir plus sur les pseudo-classes.

Quel problème résolvons-nous ?

Lors de la conception de notre site Web à l'aide de CSS (feuille de style en cascade), une chose à laquelle nous sommes tous confrontés est la répétition de code.

Par exemple :

.card .title, .card .body-content, .card .footer-action {
 ...
}

Dans cet exemple, j'ai un sélecteur .card qui est répété pour chacun de ses sélecteurs enfants. Mais simultanément, vous verrez également que le même style leur est appliqué.

C'est ainsi que fonctionne normalement le sélecteur de groupe en CSS en séparant chaque sélecteur par une virgule. Ce code fonctionne bien, mais mon souci ici est d'éviter de le répéter et de ne pas être bien organisé.

Un autre problème auquel nous sommes confrontés ici est un problème de spécificité CSS. En utilisant un code comme celui-là et trop de répétitions, nous oublions parfois quel style est utilisé, où et dans quelles conditions. C'est là que ces pseudo-classes jouent un rôle important.

Voyons chaque pseudo-classe une par une pour comprendre leur objectif.

Expliquer la pseudo-classe :is()

:is() vous permet de sélectionner plusieurs éléments partageant les styles communs, sans répéter le même code. Il simplifie les sélecteurs en les combinant en un seul bloc, réduisant ainsi la redondance. Il prend une liste de sélecteurs comme argument et applique des styles à tous les éléments qui correspondent à l'un des sélecteurs de cette liste.

.card :is(.title, .body-content, .footer-action) {
 ...
}

J'ai utilisé l'exemple ci-dessus, et vous verrez à quel point il est facile de réduire les répétitions dans notre code CSS en regroupant avec la pseudo-classe :is(). Il garde le code propre et efficace.

L'exemple ci-dessus montre que nous fournissons .title, .body-content et .footer-action comme argument de la pseudo-classe :is(). Avant :is() le conteneur parent .card est défini pour garder le style de ses enfants séparé des autres codes. C'est ainsi que :is() applique les mêmes styles sur tous les arguments qui correspondent à sa liste.

La pseudo-classe :is() est largement utilisée dans tous les principaux navigateurs. L'image ci-dessous de caniuse.com montre un aperçu détaillé des différentes versions de navigateurs :

...

Expliquer la pseudo-classe :where()

La pseudo-classe :where() est très similaire à :is(). Nous pouvons regrouper plusieurs sélecteurs pour réduire les répétitions dans notre code. Il prend les sélecteurs comme argument. La principale différence entre les pseudo-classes :is() et :where() est que :where() n’a aucune spécificité. Cela signifie que cela est utile lorsque vous souhaitez styliser des éléments sans ajouter de poids supplémentaire à votre sélecteur CSS.

Le style défini avec la pseudo-classe :where() peut être facilement remplacé. Cela signifie que :where() n'ajoute pas de spécificité supplémentaire dans ses sélecteurs et que le style à l'intérieur de la pseudo-classe :where() est basé sur la propre spécificité du sélecteur.

Le seul bon cas d'utilisation pour utiliser la pseudo-classe :where() est de définir le style de base pour plusieurs éléments et vous ne voulez pas que ce style affecte des règles plus spécifiques qui pourraient le remplacer plus tard.

De cette façon :where() vous permet d'appliquer des styles sans que votre CSS soit trop opiniâtre sur les règles qui devraient l'emporter dans un conflit.

/* Applying a default style */
:where(h1, p, a) {
  color: red; 
  font-size: 20px;
}

/* More specific style */
a {
  color: blue;
  font-size: 16px;
}

Dans l'exemple ci-dessus, les balises h1, p et a sont fournies comme argument de la pseudo-classe :where() pour le style de base. Après cela, une balise utilisée comme balise autonome avec son style peut facilement remplacer le style défini dans :where().

Comme :is(), :where() est également pris en charge dans presque tous les principaux navigateurs. Voir une image ci-dessous de caniuse.com pour vérifier les versions de navigateur prises en charge :

Expliquer la pseudo-classe :has()

:has() est un sélecteur parent. Cela signifie qu'il vous permet de sélectionner un élément parent en fonction des enfants qu'il contient. C’est une grosse affaire car CSS n’autorisait pas ce genre de comportement auparavant. Vous pouvez également dire que :has() comme instruction if de CSS car elle répond au besoin conditionnel.

Disons que vous souhaitez styliser un div uniquement s'il contient un img. Cela n'était pas possible avec le CSS traditionnel mais :has() l'a rendu possible.

<!-- Card with Image -->
<div class="card">
      <img src="https://placeholderjs.com/300x300" />
      <h1>Card With Image</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, accusantium.</p>
</div>

<!-- Card without Image -->
<div class="card">
      <h1>Card With Image</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, accusantium.</p>
      <a href="#">Call to Action</a>
    </div>

.card:has(a) {
  background-color: #e6e6e6;
}

.card:has(img) {
  background-color: #979759;
}

In this example, you see I have created two div elements with the same .card class, in CSS by using :has() pseudo-class. By using the same .card with :has() pseudo-class, two conditions are given with different styling that you can able to see in the image output.

:has() is also supported in almost all major browsers. See an image below from caniuse.com to check supported browser versions:

Conclusion

As new features are introduced in CSS, the more power it gains, and allows writing code more readable, efficient, and optimized code. You have learned :is(), :where() and :has() pseudo-classes in this article, and you see how useful they are. These pseudo-classes make our job much easier, they can be easily maintained, and the code is optimized.

This article is to show you how powerful these features are, and we’re one step closer of using these features in our project. I highly suggest you use features like these to increase your productivity.

This post is originally posted at programmingly.dev. Read full article by following this link: write less CSS by using :is(), :where(), :has() pseudo-classes

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!