Wie verwende ich Kommas in einem CSS-Variablen-Fallback?

Question

Wie kann man Kommas im Fallback-Wert einer CSS-Variablen verwenden?

z. das ist in Ordnung: var(--color, #f00), aber das ist seltsam var(--font-body, Verdana, sans-serif).

Die Idee ist, eine font-family mit einer Variablen mit einem Fallback-Wert von sagen Verdana, sans-serif setzen zu können.

---

Edit: Diese eigentlich recht gut für Browser, die CSS-Eigenschaften unterstützen, aber das Problem scheint von Google-Polymer des polyfills zu kommen.

Für die Zukunft, ich am Ende mit Variablen sowohl für die Schriftart und die Schriftfamilie Rückfall wie so (so scheint es jetzt der sauberste Weg, um zu tun):

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

Answer 1

Die unten ist ein Auszug aus den W3C spec: (Schwerpunkt ist mein)

Hinweis: Die Syntax des Rückfalls, wie die von benutzerdefinierten Eigenschaften, ermöglicht Kommas. Zum Beispiel definiert var (- foo, rot, blau) einen Rückfall von rot, blau; Das heißt, alles zwischen dem ersten Komma und dem Ende der Funktion wird als ein Fallback-Wert betrachtet.

Wie Sie aus der obigen Aussage sehen können, wenn Ihre Absicht Verdana, sans-serif als Rückfallwert einzustellen ist, wenn --font-body nicht dann die Syntax in Frage gegeben definiert ist, wird voraussichtlich arbeiten. Es erfordert keine Angebote gemäß Spezifikation.

Ich habe keinen Browser, die ich CSS Variablen und daher unterstützt könnte den folgenden Code nicht testen, aber es sollte auf die Spezifikation basiert arbeiten:

Answer 2

Dies erreicht werden kann einfach zu trennen die einzelnen Werte durch Kommata:

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> 

Wie Sie sehen können, die p.sans-serif normalerweise in einer Serifenschrift zeigen würde. Wenn Sie den Stil p auskommentieren, wird dies in einer Serifenschrift angezeigt.

Wenn die Variable jedoch nicht existiert (was nicht der Fall ist, seit wir sie auskommentiert haben), funktioniert das Fallback.

Answer 3

Als Harry erwähnt

.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>

Was Sie haben, sollte bereits in Browsern funktionieren, die benutzerdefinierte Eigenschaften implementieren.

Aber wenn Sie mit benutzerdefinierten Eigenschaften mit font-family, gibt es eine wichtige Einschränkung: var() ermöglicht es Ihnen nicht zu einem vorhandenen font-Stapel, aufgrund der Tatsache, dass benutzerdefinierte Eigenschaften Kaskade in genau der gleichen Art und Weise zu ändern oder ergänzen wie alle anderen Eigenschaften.Das heißt, der Ausdruck

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

Ergebnisse in einem von zwei möglichen Werten:

1. Wenn --font-body ein gültiger Wert für font-family ist, var(--font-body)
2. Andernfalls Verdana, sans-serif

Die "Verdana, Sans-Serif" ist nicht Teil der Schriftart-Sta ck, das in --font-body definiert ist, und sollte die in --font-body definierte Familie fehlen oder auf andere Weise nicht verfügbar für den Browser, wird es nicht fallen zurück zu Verdana oder Sans-Serif; es wird stattdessen auf eine willkürliche Standardschrift des Browsers zurückgreifen.

Wenn Sie Font-Stacks dynamisch in einem Stylesheet erstellen möchten, können Sie keine benutzerdefinierten Eigenschaften verwenden. Sie benötigen einen CSS-Präprozessor.