Le custom property CSS spiegate con un tema chiaro e scuro dal vivo costruito solo con variabili, getPropertyValue e setProperty in JavaScript, @property, @theme di Tailwind v4 e le trappole più comuni.
Dichiara una variabile CSS con due trattini, --brand: #2563eb;, di solito dentro :root così tutta la pagina può vederla, e leggila con var(--brand). Un secondo argomento è il fallback: var(--brand, blue). Le variabili si ereditano come color, quindi ridefinirne una su una sezione la cambia per tutto ciò che contiene, e questo rende i temi economici.
La sintassi in breve
Questa guida copre dichiarazione, scope e fallback, poi un selettore di tema in cui cambiano solo le variabili, uno strumento che legge e scrive variabili da JavaScript proprio in questa pagina, le proprietà registrate con @property, come Tailwind v4 trasforma il suo tema in variabili e gli errori che fanno fallire var() in silenzio.
Le variabili Sass vengono sostituite quando il foglio di stile viene compilato e spariscono dall'output. Le custom property CSS esistono nel browser in fase di esecuzione, si ereditano attraverso il DOM, possono variare per elemento e possono essere cambiate da JavaScript o da una regola media query dopo il caricamento della pagina.
No. var() non è consentito nella condizione di una regola @media, perché le media query vengono valutate senza un elemento da cui ereditare. Puoi però cambiare il valore di una variabile dentro un blocco media query, che è il modo abituale per rendere i token responsive.
Controlla l'ortografia e le maiuscole, che la variabile sia definita sull'elemento o su un antenato e che il valore finale sia valido per la proprietà. Se il valore sostituito non è valido, la dichiarazione diventa non valida al momento del calcolo del valore e la proprietà ricade sul valore ereditato o iniziale, non sulla tua regola precedente.
Una variabile non registrata è trattata come una stringa, quindi cambia di colpo a metà invece di interpolare. Registrala con @property e una sintassi come <color> o <angle>, e il browser potrà interpolarla in modo fluido in transizioni e animazioni.
Le custom property e var() funzionano da anni in tutti i principali browser. @property è più recente: Firefox l'ha aggiunta nella versione 128 nel 2024, quindi controlla caniuse se supporti versioni più vecchie e mantieni un fallback non registrato.
Valori chiari e scuri
La seconda card ridefinisce --accent per sé. La terza usa una variabile che nessuno ha definito, quindi appare il colore di fallback.
Un solo set di regole per i componenti. Il tema è un diverso set di valori, scelto dall'impostazione di sistema o da un attributo data-theme.
Leggi il valore calcolato da qualsiasi elemento. Scrivi su :root per un cambiamento globale, o su un elemento per influenzare solo il suo sottoalbero.
Registrare --angle come <angle> permette al browser di interpolarlo. Senza la registrazione il gradiente salterebbe invece di ruotare.
In Tailwind v4, le variabili in @theme generano utility come bg-brand e vengono anche emesse come vere variabili CSS utilizzabili con var().
Cose che mettono in difficoltà
Tema chiaro e scuro, solo variabili
Tema
modalità chiara
modalità scura
Report settimanale
Ordini in crescita rispetto alla settimana scorsa
ordini di esempio
Vedi dettagli
L'unica cosa che cambia
Copia CSS
Leggere e scrivere variabili da JavaScript
Il riquadro di esempio qui sotto usa var(--demo-accent, #2563eb) per il bordo e var(--demo-radius, 8px) per gli angoli. Imposta una delle due variabili e il riquadro cambia.
Nome della variabile
Nuovo valore
Il nome di una custom property inizia con due trattini, per esempio --demo-radius.
Leggi
Imposta
Rimuovi
Prova --demo-radius
Riquadro di esempio
(non impostata)
Inizia gratis · Nessuna carta di credito richiesta