les sélecteurs :is() et :where()

29 avril

les sélecteurs :is() et :where()

Rédigé par G.Cyrille Aucun commentaire 91 vue(s)

Classé dans : CSS, WebDev Mots clés : :is(), :where(), :not()

decouvrez :is() l'alter ego de :not(),et :where() où la différence réside dans le calcul de la priorité des sélécteurs compilés.
Les selecteurs contenus dans :is(), :not() sont pris en compte dans le calcul de priorité, il ne le sont pas dans :where().

Aujourd'hui, nous sommes trés prés de pouvoir les utiliser sans réserves.

Garder un oeil sur Caniuse.com pour voir où en est le support, sans oublié la définition.

Un exemple concret

Une structure HTML courante.

<body>
   <header></header>
   <main></main>
   <aside></aside>
   <footer></footer>
</body>

Pour une règle commune aux enfants directs de body, 1 seul sélecteur (où plusieurs sont regroupés entre parenthéses) se suffit.

body > :is(header, main, aside, footer) {
 margin:1em;
 border:solid 1px
}

au lieu de

body > header,
body > main, 
body > aside, 
body > footer {
 margin:1em;
 border:solid 1px
}

Un autre exemple pratique sur un menu:

nav a:is(:hover,:focus,.active) {color:orange}

Notez la class inclus dans la liste avec les pseudos class.

nav a:is(:hover, :focus, .active) {
  color: orange;
}
nav {
  display: flex;
  width: max-content;
  margin: auto;
}
nav a {
  border: 1px solid;
  text-decoration: none;
  margin: 0 0.5ch;
  padding: 0.2ch 1ch;
}
a:hover, a:focus {
  background: gray;
}

Dans ces deux premiers exemples, :is() peut-être remplacé par :where() , il n'y aura pas de difference a ce niveau.

Où se situe donc la difference?

Reprenons un exemple en comparant les selecteurs en ajoutant une régle :hover sur l'un des éléments.

Les sélecteurs en concurences:

section :is( main:hover ),
article :where(main:hover) {}
/* et */
main:hover {}

Démo

body {
  display:flex;
}
section,article {border:solid 1px;}
section :is(header, main, aside, footer),
article :where(header, main, aside, footer){
 margin:1em;
 border:solid 1px;
 padding:0.25em;
 min-width:30vw;
}
section :is( main:hover ),
article :where(main:hover) {
  margin:0em;
  color:red;
}
main:hover {
  margin:0 0.5em;
  color:green;
}

Avec article :where(main:hover), le selecteur simple main:hover {} peut-être appliqué , alors qu'avec article :is(main:hover), il n'aura aucun effet. La priorité des selecteurs contenus dans :is() sont calculés.

Comment ça ?

La différence dans le poids de selecteur de la pseudo class :where() ainsi que les selecteurs passés entre parenthése n'ont aucun poids.

À quoi sert `:where()` concrétement ?

Il va, par exemple, vous servir a appliquer des styles par défauts à l'aide de selecteurs qui auraient autrement eu une forte priorité. Ces styles seront ensuite facilement modifiable avec un selecteur simple, même si celui-ci est déclaré plus tôt dans la feuille de style.

L'utilité de :where() est au moins double, elle permet de creer de nouveau selecteur dans une feuille de style sans impacté d'autres régles déjà ecrites par mégarde, Il sert aussi a réduire la priorité d'un selecteur.Car si il est commun d'augmenter la priorité d'un selecteur, il est aussi possible d'en réduire la priorité avec :where().

section :where(p strong, p a)
{
  color:red;
  text-decoration:underline;
}
/* simple sélecteurs */
strong:hover , 
a:hover 
{
  color:green;
  text-decoration:none;
}

Si #monID est un selecteur a forte priorité, :where(#monID) n'aura aucune incidence sur des régles déja établies.

La pseudo class :not() a la même portée que la pseudo class :is() , pour limité celle-ci comme le fait :where(), il est possible de l'inclure à l'intérieur de celle-ci :where(:not()).

En raccourcie :

A vous de choisir lesquels des deux versions utiliser, :where()/:where(:not()) est facile à mettre en place sans chamboulé vos styles, :is()/:not() au contraire auront de suite un impact sur la priorité des selecteurs.

La propriété !important ne devrait ne servir qu'a des fins de test ou débugages, ce n'est certes pas toujours evidents, alors pensez donc a :is() et :not() pour vous en passer.

Rappel sur la priorité des styles selon leur intégration.

Priorités classées en ordre descendant.

- !important passeras outre toutes les priorites des autres selecteurs
- Les styles injecté via JavaScript.

- Ceux-ci sont ajouté aux balises via l'attribut style.

- Si cet attribut est inexistant, il est généré.

- Si une regle similaire avec une valeur differente existe déjà dans l'attribut style, alors celle-ci est remplacée.

- exemple avec ce code <p style="color:blue;">contenu de l`attribut style: </p> et la couleur gray appliquée via javascript el.style.color="gray";. Le contenu de l'attribut style est affiché via le pseudo ::after et la règle content: attr(style);. La valeur blue est remplacée par celle injectée via JavaScript.
- Les style en ligne via l'attribut style=""

- Les styles appliqués via cet attribut auront la priorité devant tout les selecteurs d'une feuille de style.
- Viennent enfin les feuilles de styles (fichiers CSS).
- Dans les feuilles de styles, si 2 selecteurs ont la même priorité avec une règle qui a une valeur différente, c'est la valeur lue dans le dernier des sélecteurs qui est mise à jour et appliquée.

Ressources

Comprendre et calculé la priorité, poids, des selecteurs : Cascade CSS et priorité des sélecteurs.
Lien anglophone developer.mozilla.org/en-US/docs/Web/CSS/Specificity.

Cuisine et Web

Recettes pour Cuisiniers ou Web Dev en herbes