Как использовать запятые в резервной копии переменной CSS?

Question

Как можно использовать запятые в резервном значении переменной CSS?

E.g. это нормально: var(--color, #f00), но это странно var(--font-body, Verdana, sans-serif).

Идея заключается в том, чтобы установить font-family с использованием переменной с резервным значением, например Verdana, sans-serif.

---

Edit: Это на самом деле работает довольно хорошо для браузеров, которые поддерживают свойства CSS, но проблема, кажется, исходит из polyfills Google полимера.

На будущее, я в конечном итоге с помощью переменных, как для шрифта и семейство шрифтов запасной вариант, как это (кажется чистым способом сделать это сейчас):

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

Answer 1

Ниже приводится выдержка из W3C spec: (курсив мой)

Примечание: Синтаксис запасного варианта, как и пользовательские свойства, позволяет запятые. Например, var (- foo, red, blue) определяет возврат красного, синего; то есть что-либо между первой запятой и концом функции считается резервным значением.

Как видно из приведенного выше заявления, если ваше намерение состоит в том, чтобы установить Verdana, sans-serif в качестве запасного варианта значения, когда --font-body не определен, то синтаксис приведен в вопросе, как ожидается, работать. Он не требует никаких котировок по спецификации.

Я не браузер, который поддерживает переменные CSS и, следовательно, я не могу проверить следующий код, но он должен работать на основе спецификации:

.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

Это может быть достигнуто путем просто разделяя отдельные значения запятыми:

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> 

Как вы можете видеть, p.sans-serif обычно показывают в шрифт с засечками. Если вы раскомментируете стиль p, он будет отображаться шрифтом с засечками.

Однако, если переменная не существует (что не происходит с тех пор, как мы ее прокомментировали), резервная работа.

Answer 3

Как отмечает Гарри , то, что вы уже должны были работать в браузерах, которые реализуют пользовательские свойства.

Но если вы используете пользовательские свойства с font-family, есть главное предостережение: var() не позволяет изменять или добавлять к существующему шрифта стека, из-за того, что пользовательские свойства каскада точно таким же образом, как и все другие свойства.То есть, выражение

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

результаты в одном из двух возможных значений:

1. Если --font-body является допустимым значением для font-family, var(--font-body)
2. В противном случае, Verdana, sans-serif

«Verdana, sans-serif» - не часть шрифта-sta ck, который определен в --font-body, и если семейство, определенное в --font-body, будет отсутствовать или иным образом недоступно браузеру, оно будет не вернется в Вердану или без засечек; вместо этого он вернется к произвольному шрифту по умолчанию, выбранному браузером.

Если вы хотите динамически строить шрифты в таблице стилей, вы не можете использовать настраиваемые свойства. Вам понадобится препроцессор CSS.