:is() est le nom actuel de la pseudo-classe «Matches-Any» dans le brouillon de travail CSS4.
À l'origine, cette pseudo-classe a été nommée :any()et a été implémentée avec un support limité spécifique au fournisseur:
/* Never actually worked */ :any(div, p) > em ( /*… */ )Le nom de la pseudo-classe «Matches-Any» a ensuite été remplacé :matches()par les premières versions du brouillon de travail CSS4, un support supplémentaire (incomplet) étant donné à certains navigateurs.
/* Sort of works */ :matches(div, p) > em ( /*… */ )Enfin, le brouillon de travail actuel a renommé cette pseudo-classe en :is(), qui n'est actuellement pas prise en charge dans les navigateurs.
/* Will work in the future? */ :is(div, p) > em ( /*… */ )Le but du sélecteur «Correspond à tout» (avec tous ses noms) est de faciliter l'écriture de regroupements complexes de sélecteurs.
Syntaxe
/* Theoretical until CSS4 support finalized */ :is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) ( color: #BADA55; ) /*… which would be the equivalent of: */ section h1, section h2, section h3, section h4, section h5, section h6, article h1, article h2, article h3, article h4, article h5, article h6, aside h1, aside h2, aside h3, aside h4, aside h5, aside h6, nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 ( color: #BADA55; )Hé, n'est-ce pas comme le prétraitement CSS?
Simplifier les sélecteurs avec :is()est en effet similaire à la façon dont les préprocesseurs CSS gèrent les règles imbriquées:
/* SCSS written like this: */ div, p, ul, ol ( span ( /*… */ ) ) /* after processing becomes: */ div span, p span, ul span, ol span ( /*… */ ) /* which is a lot like the effect of :is()! */Mais méfiez-vous! Les préprocesseurs, comme Sass, «déroulent» vos règles imbriquées dans une liste de sélecteurs faciles à comprendre. :is()traitera les règles de spécificité un peu différemment:
La spécificité est intéressante
Selon le projet de travail CSS4:
La spécificité de la pseudo-classe: is () est remplacée par la spécificité de son argument le plus spécifique. Ainsi, un sélecteur écrit avec: is () n'a pas forcément une spécificité équivalente au sélecteur équivalent écrit sans: is ().
Cela signifie que la spécificité de :is()est automatiquement mise à niveau vers l'élément le plus spécifique de la liste des arguments fournis:
/* This has higher precedence… */ :is(ol, .list, ul) li ( /*… */ ) /*… than this, even though this is later… */ ol li ( /*… */ ) /*… because :is() has the weight of it's heaviest selector, which is `.list`! */Prise en charge du navigateur
Nous y avons fait allusion plus tôt, mais :is()ne prend pas en charge le navigateur pour le moment. Il a été introduit dans le brouillon 1 de l'éditeur de la spécification CSS Selectors Level 4. Cela signifie que les choses sont encore en train de se profiler, ce qui fait qu'il est un peu tôt pour que les navigateurs se rallient autour d'un concept comme celui-ci.
Cela dit, nous avons une excellente prise en charge du navigateur sous la forme de :matches(avec le préfixe du fournisseur :anyremplissant certaines lacunes) pour la fonctionnalité générale. Et, bien sûr, :notest une autre pseudo-classe qui peut aider à la correspondance.
Ce qui est intéressant à noter, c'est qu'il a :is()été introduit après :matchesquoi il a été introduit après :any. C'est un peu comme si :anyc'était remplacé par :matchesqui est remplacé par :is(), les détails changeant en cours de route. Toujours soigné pour voir comment ces choses évoluent.
Pour obtenir une prise en charge maximale de «Matches-Any», il faut utiliser un mélange de noms historiques, car la gestion du navigateur est actuellement un méli-mélo de préfixes de fournisseurs et de paramètres expérimentaux à ce stade.
/* These are deprecated, but still necessary in some browsers: */ :-moz-any(div, p) > em ( /*… */ ) :-webkit-any(div, p) > em ( /*… */ ) /* Has been replaced by :is() in CSS4, but still supported by some browsers with experimental features enabled */ :matches(div, p) > em ( /*… */ ) /* Doesn't work yet, but for future support, maybe add this? */ :is(div, p) > em ( /*… */ )Voir les exemples Pen de: toute pseudo-classe par CSS-Tricks (@ css-tricks) sur CodePen.
En rapport
:matches():not():any-link()
Ressources
- Le billet de blog de David Baron expliquant pourquoi il a ajouté son
:-moz-anysoutien à Gecko - Documentation MDN
- Spécification de niveau 4 des sélecteurs CSS (ébauche de l'éditeur 1): La spécification qui introduit la
:is()pseudo-classe. - Rencontrez les sélecteurs de pseudo-classes: article CSS-Tricks décrivant le fonctionnement des pseudo-classes.