Cuisine et Web

Recettes pour Cuisiniers ou Web Dev en herbes

Le selecteur :is()

Rédigé par G.Cyrille Aucun commentaire 71 vue(s)
Classé dans : CSS, Tutoriels, WebDev Mots clés : :is(), :where(), :not()

:is() est un sélecteur qui deviendra vite incontournable dans vos feuilles de styles aux cotés de :where() et :not()

Gardez un oeil sur Caniuse.com pour voir où en est le support dans nos navigateur

N'oublions pas la définition officielle de cette propriété.

Quelques exemples.

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.

  1. - !important passeras outre toutes les priorites des autres selecteurs lorsqu'il se situe dans une feuille de style

  2. - 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"; .

      Affichons Le contenu de l'attribut style via le pseudo ::after et la règle content: attr(style);.

      Nous nous apercevons que la valeur blue est alors remplacée par celle injectée via JavaScript.

  3. - 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.

  4. - Viennent enfin les feuilles de styles (fichiers CSS et styles inclus dans les balises <style>).

  5. - 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 qui est chargée en dernier qui est appliquée.

Ressources

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

Vous aimerez aussi :

Laisser un message.

Quelle est le sixième caractère du mot 03g1x9k ?