Nuovi selettori di pseudo-classi funzionali CSS :is() e :where()

Queste aggiunte apparentemente piccole alla sintassi dei selettori CSS avranno un grande impatto.

Adam Argyle

Quando scrivi CSS, a volte potresti ritrovarti con elenchi di selettori lunghi per avere come target più elementi con le stesse regole di stile. Ad esempio, se vuoi modificare il colore di qualsiasi tag <b> trovato all'interno di un elemento di intestazione, puoi scrivere:

h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b {
  color: hotpink;
}

In alternativa, puoi utilizzare :is() e migliorare la leggibilità evitando un selettore lungo:

:is(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

La leggibilità e la praticità del selettore più brevi sono solo una parte del valore che :is() e :where() vengono trasferiti al CSS. In questo post scoprirai la sintassi e il valore di questi due pseudo-selettori funzionali.

Un'immagine infinita del prima e del dopo aver utilizzato :is()

Compatibilità del browser

:is()

Supporto dei browser

• 88
• 88
• 78
• 14

Origine

:where()

Supporto dei browser

• 88
• 88
• 78
• 14

Origine

Scopri :is() e :where()

Questi sono selettori pseudo-classi funzionali; noti il () alla fine e la iniziano con :. Pensa a queste come a chiamate di funzioni dinamiche di runtime che fanno corrispondere gli elementi. Quando si scrivono CSS, consentono di raggruppare gli elementi al centro, all'inizio o alla fine di un selettore. Possono anche cambiare specificità, dandoti il potere di annullare o aumentare la specificità.

Raggruppamento dei selettori

:where() può fare tutto ciò che può fare :where() in materia di raggruppamento. Ciò include l'utilizzo ovunque nel selettore, il loro nidificazione e l'accatastamento. Completo la flessibilità dei CSS che conosci e apprezzi. Ecco alcuni esempi:

/* at the beginning */
:where(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

/* in the middle */
article :is(header,footer) > p {
  color: gray;
}

/* at the end */
.dark-theme :where(button,a) {
  color: rebeccapurple;
}

/* multiple */
:is(.dark-theme, .dim-theme) :where(button,a) {
  color: rebeccapurple;
}

/* stacked */
:is(h1,h2):where(.hero,.subtitle) {
  text-transform: uppercase;
}

/* nested */
.hero:is(h1,h2,:is(.header,.boldest)) {
  font-weight: 900;
}

Ciascuno degli esempi di selettori riportati sopra dimostra la flessibilità di queste due pseudoclassi funzionali. Per trovare le aree del codice che potrebbero trarre vantaggio :is() o :where(), cerca i selettori con più virgole e il selettore delle ripetizioni.

Utilizzo di selettori semplici e complessi con :is()

Per ripassare i selettori, consulta il modulo sui selettori su Impara CSS. Ecco alcuni esempi di selettori semplici e complessi per illustrare la funzionalità:

article > :is(p,blockquote) {
  color: black;
}

:is(.dark-theme.hero > h1) {
  font-weight: bold;
}

article:is(.dark-theme:not(main .hero)) {
  font-size: 2rem;
}

In genere, quando utilizzi un , per creare un elenco di selettori, se uno dei selettori non è valido, tutti i selettori vengono invalidati e l'elenco non riesce ad abbinare gli elementi. Questo significa che non perdono gli errori. :is() e :where(), però, sono flessibili e possono aiutarti a risolvere un problema.

Finora, :is() e :where() sono sintatticamente intercambiabili. È arrivato il momento di esaminare le differenze.

La differenza tra :is() e :where()

Quando si tratta di specificità, i valori :is() e :where() divergono fortemente. Per approfondire la specificità, consulta il modulo sulla specificità su Impara CSS.

In breve

• :where() non ha alcuna specificità.
  :where() comprime tutta la specificità nell'elenco dei selettori passati come parametri funzionali. Si tratta della prima funzionalità di selezione di questo tipo.
• :is() assume la specificità del suo selettore più specifico.
  :is(a,div,#id) ha un punteggio di specificità di un ID, 100 punti.

Utilizzare il selettore di specificità più elevata nell'elenco è stato solo un grosso guaio quando ero troppo entusiasta di raggruppare i contenuti. Ho sempre potuto migliorare la leggibilità spostando il selettore ad alta specificità nel proprio selettore in cui non avrebbe un impatto così significativo. Ecco un esempio di ciò che intendo:

article > :is(header, #nav) {
  background: white;
}

/* better as */
article > header,
article > #nav {
  background: white;
}

Con :where(), sto aspettando di vedere le librerie offrire versioni senza specificità. La concorrenza per la specificità tra stili di autore e biblioteca stili potrebbero finire. Non c'è alcuna specificità con cui competere quando si scrive il codice CSS. Il CSS sta lavorando a una funzionalità di raggruppamento come questa da un po' di tempo, è qui e rappresenta ancora un territorio in gran parte inesplorato. Divertiti a creare fogli di stile più piccoli e rimuovendo le virgole.

Foto di Markus Winkler su Unsplash