Queste aggiunte apparentemente piccole alla sintassi dei selettori CSS avranno un grande impatto.
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.
Compatibilità del browser
:is()
:where()
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;
}
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