La :matchespseudo-classe è descritta come una pseudo-classe funzionale dalle specifiche ufficiali CSS Selectors Level 4. Non ha alcuno scopo in sé se non quello di rendere più leggeri alcuni selettori complessi consentendo loro di essere raggruppati. In un certo senso, possiamo pensare come uno :matcheszucchero sintattico.
Fondamentalmente ti impedisce di ripetere un selettore composto quando c'è solo un elemento che varia. Credo che non sia solo più veloce da scrivere ma anche da analizzare per i browser, ma non ho informazioni solide su questo, quindi per quanto ne so questa pseudo-classe non fa altro che aiutare a scrivere selettori.
Sintassi
:matches( selector(, selector)* ):matches()accetta un elenco di selettori validi come argomento. Piace:
:matches(section, article, aside, nav) h1 ( color: #BADA55; ) /* Same thing as this… */ section h1, article h1, aside h1, nav h1 ( color: #BADA55; )Rende alcuni selettori complessi molto più facili da scrivere, ad esempio:
:matches(section, article, aside, nav) :matches(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; )E meno ripetitivo:
.links:matches(:hover, :focus, :active) ( color: #BADA55; ) /* Same as */ .links:hover, .links:focus, .links:active ( color: #BADA55; )Nota che :matches()non può essere annidato e non funziona con :not(). Nessuno dei seguenti selettori funzionerà:
/* Doesn't work */ :matches(:not(… )) /* Doesn't work */ :not(:matches(… )) /* Doesn't work */ :matches(:matches(… ))Avviso nerd
Le specifiche affermano che i combinatori (ad esempio ~, >...) non sono consentiti nel selettore passato nel profilo veloce, ma saranno nel profilo complesso. Per dirla semplicemente, il profilo veloce sarà la prima (e possibile ultima) implementazione delle specifiche, mentre il profilo complesso si riferisce a un ipotetico futuro perfetto in cui le prestazioni non contano molto.
Aggiornamento giugno 2015: non sono più sicuro di quanto sia accurato il paragrafo precedente. La specifica a cui ci collegavamo è cambiata e quella parte è sparita. Quindi abbiamo rimosso il collegamento.
Imitando il comportamento con Sass
È possibile simulare un comportamento simile con Sass (o qualsiasi preprocessore CSS per quella materia):
// section h1, article h1, aside h1, nav h1 section, article, aside, nav ( h1 ( color: #BADA55; ) )Questo crea il selettore equivalente di :matches()sfruttando l'annidamento del selettore. Potresti persino creare una sorta di funzione per automatizzarlo a un livello superiore, ma questo è fuori dallo scopo qui.
Supporto del browser
Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.
Desktop
| Cromo | Firefox | IE | Bordo | Safari |
|---|---|---|---|---|
| 88 | 78 | No | 88 | 14 |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
Nota: poiché i CSS rifiutano l'intero selettore quando c'è una parte che non comprende, è necessario separarli per farlo funzionare ovunque. Ad esempio, se sei ancora
/* This won't work in any browser because * Webkit browsers do not know `moz` and * Gecko browsers do not know `webkit` */ :-webkit-any(a, b) c, :-moz-any(a, b) c ( color: #BADA55; ) /* This however will work */ :-webkit-any(a, b) c ( color: #BADA55; ) :-moz-any(a, b) c ( color: #BADA55; )