Come utilizzare la nuova pseudo-classe :is()

Tempo di lettura: 3 minuti

La nuova pseudo-classe CSS :is() si  sta formando per diventare un ottimo modo per indirizzare gli elementi, risparmiando righe su righe di codice e mantenendo il CSS il più leggibile possibile. È la fase successiva dell’evoluzione di :matches()e :any(), aggiungendo un po ‘di funzionalità extra e aumentando quanto sia semantico e intuitivo il linguaggio dietro i selettori.

Cominciamo vedendo come questa pseudo-classe, ufficialmente definita nella specifica come “match-any”, viene utilizzata nell’applicazione. Quindi parleremo di come sta sostituendo entrambi :matches()e :any(), e perché ha più senso usare invece la parola “is”.

Esempi di utilizzo di: is ()

Probabilmente puoi intuire la funzionalità :is() semplicemente guardandolo: è un mezzo per testare se un elemento è una certa cosa, lavorando essenzialmente come un booleano come quello   che troverai in molti linguaggi di programmazione. Ad esempio, nella sua forma più semplice questi due selettori sono funzionalmente uguali: if

In entrambi i casi lo styling si attiverà se un elemento è un article.

Può anche essere utilizzato per rilevare più tipi di elementi in una singola dichiarazione tramite un elenco separato da virgole. Ad esempio, ancora una volta, questi due selettori sono funzionalmente uguali:

Di per sé questo potrebbe non sembrare molto interessante, una complessità aggiunta se non altro, ma diventa particolarmente utile se utilizzato per indirizzare elementi figlio. Ad esempio, supponiamo che tu volessi scegliere come target elementi h1, ma solo quando sono figli di un elemento article, sectiono aside. Di solito dovresti scrivere:

Invece, utilizzando is:()questo può essere compresso in:

Inizia davvero a crescere in efficienza quando hai più elementi genitore e figlio che vuoi testare. Cosa succede se, invece di scegliere h1 come target elementi figlio, come nell’esempio precedente, si desidera scegliere come target tutti gli elementi di titolo figlio? Senza :is(), (e non usando le classi a scopo illustrativo), dovresti scrivere:

Ma con :is()invece hai solo bisogno di:

Perché : is () Sostituisce : any () e : match ()

Nelle precedenti bozze della specifica “match-any” questa pseudo-classe utilizzava il nome :matches()prima di essere successivamente rinominata in: is () . Un selettore più vecchio di nuovo è :any(), tuttavia, diverso :is()o :matches()non supporta selettori complessi .

La ragione principale per cui ha senso usare invece :is()viene da un’altra pseudo-classe di stile booleano che funziona in modo inverso, quell’essere :not(). Con questa pseudo-classe “nessuna corrispondenza” puoi applicare lo stile a tutto tranne che a una collezione di selettori.

Per esempio, all’inizio abbiamo mirato tutte le rubriche che sono figli di article, sectione aside. Con :not()possiamo scegliere come target tutti i titoli che non sono figli di questi elementi:

Fa buon senso grammaticale accoppiare :is()con :not(), rendendo quindi la combinazione logica ed intuitiva, e questo è il motivo principale è la sostituzione :any()e :matches(). Detto questo, il fatto che sia più breve da digitare è stato anche citato come uno dei motivi per cui è un miglioramento.

Stato attuale e supporto

La pseudo-classe :is() “match-any” è attualmente allo stato di bozza funzionante .

Si può provatlo ora in Firefox, Chrome e Safari, ma tutti e tre i browser sono ancora usando il vecchio nome :any(), che deve essere usato con prefissi vendor. Per l’uso di Firefox :-moz-any()e per Chrome e Safari :-webkit-any(). Chrome e Safari supportano anche :matches().

Fallback

È inoltre possibile utilizzare :any()e :matches() per creare fallback per :is(). Ad esempio, un set di fallback cross-browser potrebbe essere simile al seguente:

Gli sviluppatori dietro PostCSS stanno anche cercando di aggiungere la possibilità di automatizzare l’aggiunta di questi fallback nel codice.

Conclusione

La pseudo-classe :is() renderà possibile gestire il targeting per elementi molto più complessi rispetto a prima, usando CSS vanilla dove precedentemente avremmo probabilmente avuto bisogno di un pre-processore per gestire l’attività. Non vediamo l’ora che esca dallo stato di bozza e raggiunga il pieno supporto del browser.