:has() e nesting nativo: il CSS moderno che rende inutili molti script e preprocessori

Quante righe di JavaScript hai scritto solo per aggiungere una classe a un elemento padre quando qualcosa al suo interno cambiava stato? Per anni è stato l’unico modo. Oggi non lo è più: dopo l’arrivo in Firefox a fine 2023, il selettore :has() e l’annidamento nativo delle regole funzionano in tutti i browser principali.

Fino a ieri il CSS sapeva selezionare un elemento solo in base a ciò che lo precede o lo contiene. Con :has() lo selezioni in base a ciò che contiene lui. Per questo lo chiamano, con qualche approssimazione, selettore genitore:

.scheda:has(img) { grid-template-columns: 1fr 2fr; }
form:has(:invalid) .invia { opacity: .5; }
label:has(input:checked) { border-color: var(--accento); }

Tre righe, e una scheda cambia layout a seconda che abbia o no un’immagine, un pulsante si spegne finché il modulo contiene errori, un’etichetta si evidenzia quando la sua casella è selezionata. Lo stesso vale per menu e pannelli che cambiano aspetto quando sono aperti, o per la pagina che blocca lo scorrimento mentre è aperta una finestra modale. Prima servivano script e classi aggiunte a mano.

L’annidamento senza Sass

Il nesting era uno dei motivi principali per usare Sass o Less. Adesso è CSS:

.menu {
  display: flex;
  & a { color: var(--testo); }
  & a:hover { color: var(--accento); }
  @media (max-width: 600px) { flex-direction: column; }
}

Le regole di un componente restano insieme, media query comprese, e il file si legge meglio. C’è però un rischio, lo stesso che chi usa Sass conosce bene: annidare troppo produce selettori lunghi e specifici, difficili da sovrascrivere. Uno o due livelli bastano quasi sempre.

Con variabili, nesting, funzioni matematiche e @layer nativi, molti progetti possono fare a meno di un preprocessore. Resta utile per i mixin complessi o la generazione automatica di classi, ma non è più una scelta obbligata.

Prova così. Apri il JavaScript del tuo sito e cerca gli script che aggiungono o tolgono classi solo per cambiare uno stile: ognuno è un candidato per :has(). Prima di toglierli, guarda nei dati di analytics quanti visitatori usano browser vecchi, e lascia loro uno stile di base dignitoso. Poi chiediti cosa fa ancora per te il preprocessore.