Demo dal vivo e modificabili di nesting CSS nativo, selettore :has(), container query, subgrid, @layer, :is(), color-mix() e text-wrap: balance, con una tabella di supporto Baseline.
Il CSS puro oggi svolge compiti che prima richiedevano Sass o JavaScript. Il nesting nativo raggruppa le regole correlate, :has() stilizza un genitore in base ai suoi figli, le container query adattano un componente alla sua larghezza e subgrid allinea gli elementi annidati alla griglia esterna. Tutte e quattro sono diventate Baseline nel 2023, quindi i browser attuali le supportano.
Le funzionalità principali in sintesi
Funzionalità
Sostituisce
Baseline dal
Nesting
Il nesting in stile Sass in un preprocessore
:has()
JavaScript che attiva una classe sul genitore
Container size query
Media query sul viewport dentro i componenti
Subgrid
Altezze fisse per allineare le righe delle card
Ogni funzionalità qui sotto ha una demo che puoi modificare, e la card con container query risponde a uno slider così puoi vederla cambiare layout senza ridimensionare la finestra. La tabella di supporto indica l'anno in cui ogni funzionalità è diventata Baseline, cioè funziona nelle ultime versioni di Chrome, Edge, Firefox e Safari.
Trascina lo slider della larghezza nella demo delle container query e osserva la card passare da impilata ad affiancata.
Modifica qualsiasi esempio a sinistra. Il risultato isolato a destra si ridisegna mentre scrivi.
Controlla la tabella di supporto prima di andare in produzione. Baseline significa tutti e quattro i motori principali, non le versioni più vecchie.
Copia lo snippet che ti serve. Nessuno richiede un passaggio di build o una libreria.
Mantieni il nesting poco profondo. Due livelli di solito bastano, e un nesting profondo produce selettori lunghi e ad alta specificità, proprio come in Sass.
Le container query hanno bisogno di un container: imposta prima container-type: inline-size sul genitore, altrimenti la regola @container non trova corrispondenze.
Racchiudi le regole :has() in @supports selector(:has(*)) se i browser più vecchi contano per il tuo pubblico, così ripiegano in modo pulito.
Usa :where() per gli stili di librerie o reset. Aggiunge specificità zero, quindi chiunque può sovrascriverli con una singola classe.
Domande frequenti
Mi serve ancora Sass per il nesting?
Non solo per il nesting. Il nesting nativo copre lo schema comune di regole dentro regole più il selettore &. Sass offre ancora mixin, cicli e funzioni, anche se le custom property e color-mix() hanno preso il posto di gran parte di ciò per cui lo si usava.
Qual è la differenza tra container query e media query?
Una media query interroga il viewport, di solito la larghezza della finestra. Una container query interroga un elemento antenato scelto. Questo permette a un unico componente card di mostrare un layout compatto in una sidebar stretta e un layout ampio nella colonna principale della stessa pagina.
:has() è lento?
I motori dei browser lo hanno ottimizzato prima del rilascio e l'uso normale non dà problemi. Selettori molto ampi come body:has(*) su pagine enormi richiedono più lavoro di corrispondenza, quindi ancora :has() a una classe di componente specifica quando puoi.
Cosa significa Baseline?
Baseline è un'etichetta della community della piattaforma web che indica che una funzionalità funziona nelle versioni attuali di Chrome, Edge, Firefox e Safari. Newly available è la data in cui l'ultimo di questi l'ha rilasciata. Widely available arriva circa trenta mesi dopo.
Quando usare subgrid invece di una griglia annidata?
Usa subgrid quando i figli di un elemento della griglia devono allinearsi alle tracce della griglia esterna, come titoli, testo e pulsanti in una riga di card. Una semplice griglia annidata ha tracce proprie e indipendenti, quindi contenuti di lunghezza diversa finiscono disallineati.
Come funziona il selettore & nel nesting
Dentro un blocco annidato, & sta per il selettore esterno. &:hover applica la pseudo-classe al genitore stesso, & + & seleziona un fratello dello stesso tipo e .theme-dark & colloca il genitore dentro un altro contesto.
Un selettore annidato senza & viene trattato come discendente, quindi .card { p { } } significa .card p. I browser rilasciati dal 2023 in poi accettano anche un semplice nome di elemento come p all'inizio di una regola annidata.
I cascade layer in pratica
@layer reset, base, components, utilities; dichiara un ordine in anticipo. Un layer successivo batte uno precedente qualunque sia la specificità, il che mette fine alla maggior parte dei conflitti tra una libreria di componenti e le tue sovrascritture.
Gli stili fuori da qualsiasi layer battono tutti gli stili nei layer. È utile quando porti un vecchio foglio di stile in una configurazione a layer: all'inizio lascia le regole legacy fuori dai layer, poi spostale dentro una alla volta.
Cosa adottare per primo
Se i tuoi utenti usano browser attuali, nesting e :is() sono vantaggi gratuiti che accorciano soltanto il tuo foglio di stile. Le container query ripagano quando hai componenti riutilizzabili che compaiono a larghezze diverse. Subgrid conta soprattutto per griglie di card e moduli con etichette.
Nesting CSS nativo
Una card stilizzata con regole annidate
L'hover, il titolo e la variante scura stanno tutti dentro .card. & si riferisce a .card stessa.
Il selettore del genitore :has()
Evidenziare un campo quando la sua checkbox è spuntata
In questo frame non gira alcuno script. L'etichetta si stilizza da sola perché contiene un input selezionato.
Cambiare il layout di una card solo quando contiene un'immagine
Le card senza immagine mantengono il layout a colonna singola; quelle con un'immagine passano a due colonne.
Container query
Il CSS dietro la demo con lo slider
container-type rende .shelf misurabile; la regola @container poi trasforma la card in una riga quando lo shelf è largo almeno 420px.
Subgrid
Righe di card allineate qualunque sia la lunghezza del testo
Ogni card occupa tre righe della griglia esterna e usa subgrid per le proprie righe, così ogni titolo, corpo e pulsante condivide la stessa linea.
@layer, :is(), :where(), color-mix() e text-wrap
I cascade layer decidono il vincitore in base all'ordine
Il selettore ID sta in un layer precedente, quindi la semplice classe nel layer successivo vince comunque.
:is() e :where() accorciano gli elenchi di selettori
:is() prende la specificità del suo argomento più forte, :where() conta sempre zero.
color-mix() per tinte e sfumature di hover
Mescolare con bianco o nero nello spazio oklab dà tinte uniformi a partire da un solo colore del brand.
text-wrap: balance per i titoli
Il secondo titolo distribuisce le parole in modo uniforme sulle righe invece di lasciare una parola da sola. I browser limitano il bilanciamento a blocchi brevi di poche righe.
Supporto dei browser (Baseline)
Stato Baseline (ultime versioni di Chrome, Edge, Firefox e Safari), verificato su MDN a ottobre 2026
Funzionalità
Baseline
Note
:is() e :where()
Widely available
@layer (cascade layer)
Widely available
Container size query (@container, container-type)
Le container style query sono separate e non ancora Baseline; controlla caniuse
color-mix()
Subgrid
Nesting CSS
I selettori di elemento semplici all'inizio di una regola annidata richiedono versioni del 2023 o successive
:has()
text-wrap: balance
I browser più vecchi lo ignorano e vanno a capo normalmente
Demo delle container query
La card qui sotto reagisce alla larghezza del suo container grigio, non alla tua finestra. Supera i 420px e passa a un layout a due colonne.
Larghezza del container:
Lampada da scrivania in noce
Luce calda, interruttore in ottone, paralume fatto a mano.