Nuove pseudo-classi css

Scrivi un CSS più pulito con le nuove pseudo-classi :where() e :is()

Se non hai sentito parlare delle pseudo-classi :where() e :is(), è assolutamente normale. Sono stati introdotti solo di recente nella maggior parte dei browser. Sicuramente a breve saranno ampiamente utilizzate, in quanto rappresentano un modo veloce e più pulito di scrivere codice css. In questo articolo impareremo come utilizzare i nostri nuovi pratici strumenti per scrivere CSS.

:is()

Pensa a quando vuoi applicare lo stesso stile a più elementi nel tuo HTML. Probabilmente ti ritroverai a scrivere qualcosa che assomiglia a questo:

.main h1,
.main h2,
.main .heading, {
  line-height: 1.2;
}.nav li,
.nav p {
  padding: 5px 10px;
}

Con :is() possiamo scrivere il nostro CSS in un modo più breve, veloce ed elegante.

.main :is(h1, h2, .heading){
  line-height: 1.2;
}.nav :is(li, p) {
  padding: 5px 10px;
}

Immagina tutte le righe di codice che stai evitando di scrivere. Utilizzando le nuove pseudo-classi, utilizziamo un metodo molto simile a come funziona la nidificazione con i preprocessori tipo SCSS. La funzione pseudo-classe :is() prende un elenco di selettori e seleziona qualsiasi elemento che può essere selezionato da uno dei selettori in quell’elenco. Può anche essere concatenato con altri selettori come :not(), :firstchild() ecc.

:where()

Proprio come :is(), :where() prende un elenco di selettori come argomento e seleziona qualsiasi elemento che può essere selezionato da uno dei selettori in quell’elenco.

Il nostro codice di prima:

.main h1,
.main h2,
.main .heading, {
  line-height: 1.2;
}.nav li,
.nav p {
  padding: 5px 10px;
}

dopo, usando :where()

.main :where(h1, h2, .heading){
  line-height: 1.2;
}.nav :where(li, p) {
  padding: 5px 10px;
}

Cosa! Ti sembra esattamente lo stesso ! Certo hai perfettamente ragione.. Allora dove sta la differenza? Si trova tutta nella

Specificità

:is()

Prende la specificità del suo selettore più specifico

:where()

Ha una specificità di tipo 0

È importante tenere a mente questo piccolo ma molto importante dettaglio quando utilizzi :is() e :where() nel codice, per evitare di applicare modifiche CSS in altri punti.

La maggior parte dei browser li supporta già e ti consiglio vivamente di iniziare ad abituarti a usarli e rendere il tuo codice più pulito e più veloce da scrivere!

Ciao alla prossima 🙂

---