:is() è il nome corrente della pseudo-classe "Matches-Any" nella bozza di lavoro CSS4.
In origine, questa pseudo-classe era denominata :any()ed è stata implementata con un supporto limitato specifico del fornitore:
/* Never actually worked */ :any(div, p) > em ( /*… */ )Il nome della pseudo-classe "Matches-Any" è stato quindi cambiato :matches()nelle prime versioni della bozza di lavoro CSS4, con un supporto aggiuntivo (incompleto) dato ad alcuni browser.
/* Sort of works */ :matches(div, p) > em ( /*… */ )Infine, l'attuale bozza di lavoro ha rinominato questa pseudo-classe in :is(), che attualmente non è supportata nei browser.
/* Will work in the future? */ :is(div, p) > em ( /*… */ )L'obiettivo del selettore "Matches Any" (con tutti i suoi nomi) è rendere più facile scrivere raggruppamenti complessi di selettori.
Sintassi
/* 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; )Ehi, non è come la preelaborazione CSS?
Semplificare i selettori con :is()è davvero simile al modo in cui i preprocessori CSS gestiscono le regole annidate:
/* 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()! */Ma attenzione! I preprocessori, come Sass, "srotolano" le regole annidate in un elenco di selettori di facile comprensione. :is()gestirà le regole di specificità in modo leggermente diverso:
La specificità è interessante
Secondo la bozza di lavoro CSS4:
La specificità della pseudo-classe: is () è sostituita dalla specificità del suo argomento più specifico. Pertanto, un selettore scritto con: is () non ha necessariamente una specificità equivalente al selettore equivalente scritto senza: is ().
Ciò significa che la specificità di :is()viene aggiornata automaticamente all'elemento più specifico nell'elenco di argomenti fornito:
/* 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`! */Supporto browser
Abbiamo accennato a questo in precedenza, ma :is()al momento non supporta il browser. È stato introdotto nella bozza dell'editor 1 delle specifiche di livello 4 dei selettori CSS. Ciò significa che le cose stanno ancora prendendo forma, rendendo un po 'presto per i browser radunarsi attorno a un concetto come questo.
Detto questo, abbiamo un ottimo supporto del browser sotto forma di :matches(con prefisso del fornitore che :anyriempie alcune lacune) per la funzionalità generale. E, naturalmente, :notè un'altra pseudo-classe che può aiutare con la corrispondenza.
Ciò che è interessante notare è che è :is()stato introdotto dopo di :matchesche è stato introdotto dopo :any. È un po 'come :anyse venisse sostituito da quello :matchesche viene sostituito da :is(), con i dettagli che cambiano lungo la strada. Sempre accurato per vedere come si evolvono queste cose.
Per ottenere il massimo supporto per "Matches-Any" è necessario utilizzare un mix di nomi storici, poiché la gestione del browser è attualmente un miscuglio di prefissi di fornitori e impostazioni sperimentali a questo punto.
/* 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 ( /*… */ )Vedi gli esempi di Pen di: any pseudo-class di CSS-Tricks (@ css-tricks) su CodePen.
Relazionato
:matches():not():any-link()
Risorse
- Post sul blog di David Baron che spiega perché ha aggiunto il
:-moz-anysupporto a Gecko - Documentazione MDN
- Specifica di livello 4 dei selettori CSS (bozza 1 dell'Editore): la specifica che introduce la
:is()pseudo-classe. - Incontra i selettori di pseudo classi: post CSS-Tricks che illustra come funzionano le pseudo-classi.