La pseudo-classe CSS :where() est apparue. Elle va permettre à toutes les personnes intéressées par l'écriture d'un code propre et compact d'appeler des sélecteurs, à l'unité ou sous forme de liste, et de les réduire. Moins de code, gain de temps de travail, gain de temps de chargement, une mesure de plus pour réduire son empreinte carbone par la même occasion.
Sélecteur de pseudo-classe fonctionnelle CSS qui prend une liste de sélecteurs comme argument et applique les styles donnés à tout élément de cette liste.
Mozilla Developper Network:where()est très utile pour raccourcir une longue liste de sélecteurs.
:where(), car oui, il s'agit bien d'une fonction CSS.En CSS, lorsque plusieurs éléments ont les mêmes règles de style qui leur sont appliquées en même temps, nous finissons souvent par écrire une longue liste de sélecteurs séparés par des virgules.
Voici un exemple dans lequel nous appliquons le même style à toutes les balises a trouvées à l'intérieur d'un élément header, main et footer :
header a:hover,
main a:hover,
footer a:hover {
color: green;
text-decoratíon: underline;
}
En ayant trois éléments seulement dans l'extrait de code précédent l'utilisation de la fonction :where() peut paraitre inutile, mais avec un plus grand nombre d'éléments et de sélecteurs, le code commencera à paraître désordonné, difficile à lire et à comprendre. Un travail de regroupement des styles est nécessaire en amont.
C'est là que la fonction de pseudo-classe :where() entre en jeu.
Voici à quoi ressemblerait l'exemple ci-dessus en utilisant la fonction :where() :
:where(header, main, footer) a:hover {
color: green;
text-decoratíon: underline;
}
Lorsque le navigateur accède à l'extrait de code, le code demande au navigateur de rechercher les sélecteurs d'en-tête, principal et de pied de page et de cibler toutes les balises d'ancrage dans ces sélecteurs. Ensuite, lorsqu'un utilisateur survole l'une de ces balises d'ancrage, le navigateur doit appliquer les styles spécifiés (dans ce cas, rouge et souligné). Cette fonction de pseudo-classe nous donne le luxe d'écrire une longue liste de sélecteurs d'une manière plus courte et plus facilement compréhensible.
:where()Avec la fonction :where(), nous pouvons regrouper des éléments de plusieurs manières et combinaisons.
Nous pouvons placer la fonction :where() au début, au milieu ou à la fin du sélecteur.
/* first list */
header a:hover,
main a:hover,
footer a:hover {
color: green;
text-decoratíon: underline;
}
/* second list */
article header > p,
article footer > p{
color: gray;
}
/* third list */
.dark-theme button,
.dark-theme a,
.dim-theme button,
.dim-theme a{
color: purple;
}
:where()
/* first list */
/* at the beginning */
:where(header, main, footer) a:hover {
color: red;
text-decoratíon: underline;
}
/* second list */
/* in the middle */
article :where(header, footer) > p {
color: gray;
}
/* third list */
/* at the end */
.dark-theme :where(button, a) {
color: purple;
.dim-theme a{
color: purple;
}
/* Cette stratégie de réduction d'une liste de sélecteurs complexe est appelée empilement. */
/* third list*/
/* stacked */
:where(.dark-theme, dim-theme) :where(button, a) {
color: purple;
}
Dans la première liste, nous spécifions que les styles rouge et souligné doivent être appliqués aux éléments d'en-tête, principal et de pied de page au survol.
Dans la deuxième liste, nous spécifions que les éléments d'article, d'en-tête et de pied de page doivent être stylisés en gris.
Nous avons divisé la troisième liste en deux fonctions :where() pour plus de clarté. Dans cette liste, nous spécifions que le bouton et un élément doivent être stylés avec le .dark-theme, .dim-theme et le violet.
:where() et les spécificités CSSQu'est-ce que la spécificité CSS ? Si un élément a deux ou plusieurs sélecteurs avec des règles de style en conflit, un navigateur examinera le score de spécificité pour déterminer quel style doit être appliqué.
La spécificité s'applique uniquement lorsque plusieurs déclarations ciblent le même élément. En tant que développeurs, nous commettons parfois des erreurs et essayons de cibler un élément HTML plus d'une fois. La spécificité détermine laquelle des règles de style du sélecteur sera appliquée à l'élément.
La spécificité de la fonction CSS :where() est toujours nulle. Par conséquent, tout élément ciblé avec cette fonction obtient automatiquement une spécificité de zéro également. Cela nous donne le pouvoir d'annuler facilement le style de n'importe quel élément que nous voulons tout en réduisant sa spécificité à zéro.
:where() La fonction :where() peut être un outil utile dans certains cas d'utilisation particuliers, mais il y a aussi des cas où elle doit être évitée. Presque tous les revers qui se produisent lors de l'utilisation de la fonction de pseudo-classe :where() se résument à la spécificité. Parce que :where() n'a aucune spécificité, nous devons être très prudents quant à où et quand utiliser cette fonction. Examinons d'abord quelques cas d'utilisation dans lesquels :where() peut être particulièrement utile.
Une réinitialisation CSS fait référence au chargement d'un ensemble de règles de style avant tout autre style afin d'effacer les styles intégrés du navigateur. Les réinitialisations CSS sont généralement placées en haut ou au début de la feuille de style CSS afin qu'elles se chargent en premier. Les développeurs les utilisent souvent pour supprimer initialement les styles par défaut donnés par le navigateur à plusieurs éléments, avant de commencer à styliser leurs éléments et leurs sites Web.
Les réinitialisations CSS peuvent également aider à supprimer les incohérences entre les différents navigateurs. Les réinitialisations CSS sont des styles temporaires, qui changeront plus tard dans le processus de style. Mais, selon la simplicité ou la complexité des sélecteurs d'un élément ou d'un groupe d'éléments utilisés dans la réinitialisation CSS, il peut être difficile de remplacer les styles initiaux plus tard dans le code.
Par exemple, supposons que nous ciblions toutes les balises d'ancrage sur le site Web et que nous les stylisons en vert. Ensuite, nous décidons plus tard de styliser toutes les balises d'ancrage du pied de page en gris.
Le nouveau style (couleur grise) n'est pas appliqué en raison de la complexité de sa sélection dans la réinitialisation CSS. Le sélecteur dans la réinitialisation a un ordre de spécificité plus élevé que le sélecteur utilisé plus tard dans le code pour cibler uniquement les balises d'ancrage du pied de page, de sorte que le style de couleur grise n'est pas appliqué.
Maintenant, si nous ajoutons la fonction de pseudo-classe :where() à la réinitialisation CSS, cela donne automatiquement à tous les éléments de la réinitialisation une spécificité de zéro. Cela nous permet de changer plus facilement les styles ultérieurement sans avoir à nous soucier des conflits de spécificité.
La fonction :where() peut être utile si nous voulons supprimer ou annuler les styles ou réduire la spécificité d'un élément ou d'un ensemble d'éléments. Le changement se produira au moment où nous le plaçons dans notre code, presque comme une "mini réinitialisation".
Un code plus court est plus facile à lire et à déboguer. Une bonne règle empirique consiste à examiner tout code contenant plus de deux virgules ou trois éléments de liste pour voir s'il peut être minifié à l'aide de la fonction :where(). C'est également une stratégie utile pour les combinaisons de deux sélecteurs ou plus. Par exemple :
section > header >p >a
Examinons maintenant un cas d'utilisation dans lequel la fonction :where() doit être évitée.
S'il est important de s'assurer que le style ou la spécificité d'un élément ou d'un ensemble d'éléments ne change à aucun moment dans le futur, n'utilisez pas la pseudo-classe :where(). Le style et la spécificité de tout élément ciblé avec ce sélecteur seront annulés.
La fonction de pseudo-classe CSS :where() est très utile pour réinitialiser son CSS, supprimer un style à tout moment et rendre notre code plus facile à lire et à déboguer. Dans cet article, vous avez pu voir comment la fonction :where() peut être utilisée en production et examiné plusieurs cas d'utilisation.
Texte original traduit de l'anglais
À la recherche d'un développeur Shopify ? vous êtes à la bonne adresse !
N'hésitez pas à voir mon profil sur Codeur.com