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

Queste apparentemente piccole aggiunte alla sintassi del selettore CSS avranno un grande impatto.

Adam Argyle

Durante la scrittura di CSS, a volte potresti ritrovarti con lunghi elenchi di selettori per scegliere come target più elementi con le stesse regole di stile. Ad esempio, se vuoi modificare il colore di tutti i tag <b> trovati all'interno di un elemento heading, puoi scrivere:

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

Puoi invece 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à dei selettori più brevi sono solo una parte del valore che :is() e :where() apportano al CSS. In questo post scoprirai la sintassi e il valore di questi due pseudo selettori funzionali.

Compatibilità del browser

:is()

:where()

Scopri :is() e :where()

Si tratta di selettori di pseudo-classi funzionali. Osserva il () alla fine e il modo in cui iniziano con :. Possono essere considerate come chiamate di funzioni dinamiche di runtime che corrispondono a elementi. Quando scrivi codice CSS, ti consente di raggruppare gli elementi al centro, all'inizio o alla fine di un selettore. Possono anche cambiare la specificità, dandoti la possibilità di annullarla o aumentarla.

Raggruppamento di selettori

Tutto ciò che :is() può fare per quanto riguarda il raggruppamento, così può :where(). Ciò include l'utilizzo in qualsiasi punto del selettore, la nidificazione e l'impilamento. Totale flessibilità 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 selettore precedenti dimostra la flessibilità di queste due pseudo-classi funzionali. Per trovare le aree del tuo codice che potrebbero trarre vantaggio da :is() o :where(), cerca i selettori con più virgole e la loro ripetizione.

Utilizzo di selettori semplici e complessi con :is()

Per un ripasso dei selettori, dai un'occhiata al modulo dei selettori su Impara CSS. Ecco alcuni esempi di selettori semplici e complessi per illustrare la capacità:

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

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

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

Finora, :is() e :where() sono intercambiabili sintatticamente. È il momento di vedere in che cosa si differenziano.

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

Per quanto riguarda la specificità, :is() e :where() divergono nettamente. Per un risveglio sulla specificità, consulta il modulo di specificità su Impara CSS.

In breve

• :where() non ha specificità.
  :where() riduce tutte le specificità nell'elenco dei selettori passati come parametri funzionali. È una funzionalità di selezione prima del suo genere.
• :is() prende la specificità del suo selettore più specifico.
  :is(a,div,#id) ha un punteggio di specificità di un ID di 100 punti.

Adottare il selettore di specificità più alto dell'elenco mi è stato utile solo quando ero troppo entusiasta del raggruppamento. Sono sempre riuscita a migliorare la leggibilità spostando il selettore di elevata specificità nel relativo selettore, dove non avrebbe avuto un impatto significativo. Ecco un esempio di cosa intendo:

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

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

Con :where(), non vedo l'ora di vedere le librerie che offrono versioni senza specifiche. La concorrenza specifica tra gli stili degli autori e quelli delle librerie potrebbe finire. Non ci sarebbe 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, è arrivata e il territorio è ancora in gran parte inesplorato. Divertiti a creare fogli di stile più piccoli e a rimuovere le virgole.

Foto di Markus Winkler su Unsplash