Come utilizzare le virgole in un fallback di variabili CSS?

Question

Come si possono usare le virgole nel valore di riserva di una variabile CSS?

E.g. questo va bene: var(--color, #f00), ma questo è strano var(--font-body, Verdana, sans-serif).

L'idea è di essere in grado di impostare uno font-family utilizzando una variabile con un valore di fallback di dire Verdana, sans-serif.

---

Edit: Questo effettivamente funziona abbastanza bene per i browser che supportano le proprietà CSS, ma la questione sembra venire da polyfills di Google Polymer.

Per riferimento futuro, ho finito per usare le variabili sia per il tipo di carattere e il ripiego famiglia di font in questo modo (sembra essere il modo più pulito di farlo per ora):

font-family: var(--font-body, Verdana), var(--font-body-family, sans-serif) 

Answer 1

Il sotto è un estratto del W3C spec: (corsivo è mio)

Nota: La sintassi del ripiego, come quello di proprietà personalizzate, permette virgole. Ad esempio, var (- foo, red, blue) definisce un fallback di rosso, blu; ovvero, qualsiasi cosa tra la prima virgola e la fine della funzione è considerata un valore di fallback.

Come si può vedere dalla dichiarazione di cui sopra, se la vostra intenzione è quella di impostare Verdana, sans-serif come valore di ripiego quando --font-body non è definito quindi la sintassi data in questione dovrebbe lavorare. Non richiede alcuna citazione come da specifiche.

Non ho un browser che supporti le variabili CSS e quindi non ho potuto testare il seguente codice ma dovrebbe funzionare sulla base della specifica:

.component .item1 { 
 
    --font-body: Arial; 
 
    font-family: var(--font-body, Verdana, sans-serif); 
 
    /* should result in font-family: Arial */ 
 
} 
 
.component .item2 { 
 
    font-family: var(--font-body, Verdana, sans-serif); 
 
    /* should result in font-family: Verdana, sans-serif */ 
 
}

<div class=component> 
 
    <p class=item1>Arial 
 
    <p class=item2>Verdana, sans-serif 
 
</div>

Answer 2

Ciò può essere ottenuto da semplicemente separando i valori separati da virgole:

p{ 
    /* By commenting this out, we are making the variable non-existent */ 
    /* --font-family: "Times New Roman, serif"; */ 
} 

p.sans-serif{ 
    font-family: var(--font-family, "Arial", "Helvetica"); 
} 

<p class="sans-serif"> 
    This will be in a sans-serif font because the fallback value is "Arial" and "Helvetica" 
</p> 

Come si può vedere, la p.sans-serif avrebbe mostrato normalmente in un font serif. Se si decommenta lo stile p, verrà visualizzato con un font serif.

Tuttavia, se la variabile non esiste (che, non da quando abbiamo commentato), il fallback funziona.

Answer 3

Come menzioni Harry , quello che hai dovrebbe già funzionare nei browser che implementano proprietà personalizzate.

Ma se si sta utilizzando le proprietà personalizzate con font-family, c'è un importante avvertimento: var() non consente di modificare o aggiungere un font-stack esistente, a causa del fatto che le proprietà personalizzate a cascata esattamente nello stesso modo come tutte le altre proprietà.Vale a dire, l'espressione

var(--font-body, Verdana, sans-serif) 

risultati in uno dei due valori possibili:

1. Se --font-body è un valore valido per font-family, var(--font-body)
2. Altrimenti, Verdana, sans-serif

Il "Verdana, sans-serif" è non parte del font-sta ck definito in --font-body e qualora la famiglia definita in --font-body manchi o non sia altrimenti disponibile per il browser, sarà non tornare a Verdana o sans-serif; ricadrà invece su un font predefinito arbitrario scelto dal browser.

Se si sta cercando di compilare i font in modo dinamico in un foglio di stile, non è possibile utilizzare proprietà personalizzate. Avrai bisogno di un preprocessore CSS.