Valori di fallback e var()
Fornisca valori di fallback in var() nel caso in cui una custom property non sia definita o non sia valida.
Valori di fallback e var() è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.
Sintassi del fallback di var()
La funzione var() accetta un secondo argomento opzionale come valore di fallback, usato quando la proprietà personalizzata non è definita.
<button class="button">Fallback: royalblue</button>
Quando si applicano i fallback
Il fallback viene usato quando:
- La proprietà non è definita nell'ambito corrente
- La proprietà ha il valore
initial - La proprietà è stata dichiarata con un valore non valido per il contesto in cui viene usata
Più livelli di fallback
Annidi le chiamate a var() per concatenare più livelli di fallback:
<p class="text">Falls through two levels to #3b82f6</p>
Il fallback può essere qualsiasi valore
I fallback possono essere qualsiasi valore valido per la proprietà, incluse altre variabili, valori calcolati o valori letterali:
<div class="card">16px / 50%</div>
La parola chiave initial
Impostare una proprietà personalizzata su initial equivale a non averla mai impostata. Insieme a un fallback, questo consente ai componenti di ignorare una proprietà personalizzata ereditata.
<div class="no-theme">
<button class="button">Falls back to gray</button>
</div>
Valore sicuramente non valido
Usare initial come valore di una proprietà personalizzata garantisce l'attivazione del fallback. Questa tecnica consente di creare flag di funzionalità opzionali in CSS.
Proprietà personalizzata + @property
La regola @property (Houdini) registra una proprietà personalizzata tipizzata con un valore iniziale garantito. È una soluzione più solida rispetto all'affidarsi ai fallback.
<div class="track">
<div class="bar"></div>
</div>
Fallback per valori sicuri nelle animazioni
Si assicuri che le transizioni funzionino anche quando una proprietà personalizzata non è impostata, fornendo un fallback sicuro da cui avviare la transizione:
<div class="modal">Modal shown via --modal-opacity: 1 (fallback is 0 when unset)</div>
Debug delle variabili mancanti
Se manca una proprietà personalizzata e non viene fornito alcun fallback, la proprietà viene calcolata al suo valore iniziale, spesso alla parola chiave initial. Per i colori, questo può produrre risultati imprevisti, come trasparenza o nero. Aggiunga sempre fallback alle proprietà critiche.
var() nelle proprietà personalizzate
I valori delle proprietà personalizzate possono a loro volta fare riferimento ad altre proprietà personalizzate, creando una catena di token:
<div class="swatch swatch-primary"></div>
<div class="swatch swatch-light"></div>
Fallback e specificità
I fallback non hanno nulla a che vedere con la specificità: si applicano solo quando la proprietà personalizzata a cui si fa riferimento non è definita o non è valida. La specificità determina quale regola imposta la proprietà personalizzata, non quale fallback prevale.
Verifica rapida
Che cosa fa color: var(--theme-text, #111) quando --theme-text non è definita?
Riepilogo
var(--name, fallback) fornisce un fallback quando la proprietà personalizzata non è definita. I fallback possono essere annidati per gestire più livelli. Utilizzi @property per proprietà personalizzate tipizzate con valori iniziali garantiti. Fornisca sempre dei fallback per le proprietà visive critiche.
Domande Frequenti
La lezione «Valori di fallback e var()» è gratuita?
Sì — il testo completo di «Valori di fallback e var()» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.
Cosa imparerò in «Valori di fallback e var()»?
Fornisca valori di fallback in var() nel caso in cui una custom property non sia definita o non sia valida. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare CSS Academy?
Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «Valori di fallback e var()»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione CSS Academy?
Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Dichiarare e utilizzare le custom property
- Valori di fallback e var()
- Definire lo scope delle variabili per i componenti
- Aggiornare le variabili con JavaScript