如何在 CSS 变量回退中使用逗号？

Question

如何在 CSS 变量的备用值中使用逗号？

例如这很好：var(--color, #f00)，但这很奇怪 var(--font-body, Verdana, sans-serif)。

我们的想法是能够使用后备值为 Verdana, sans-serif.

的变量设置 font-family

编辑： 这对于支持 CSS 属性的浏览器来说实际上工作得很好，但问题似乎来自 Google Polymer 的 polyfill。

为了将来参考，我最终像这样为字体和字体系列后备使用了变量（目前看来是最干净的方法）：

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

Answer 1

这可以通过简单地用逗号分隔单独的值来实现：

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 2

以下是 W3C spec 的摘录：（重点是我的）

Note: The syntax of the fallback, like that of custom properties, allows commas. For example, var(--foo, red, blue) defines a fallback of red, blue; that is, anything between the first comma and the end of the function is considered a fallback value.

正如您从上面的语句中看到的那样，如果您打算在未定义 --font-body 时将 Verdana, sans-serif 设置为后备值，那么所给出的语法应该有效。根据规范，它不需要任何报价。

我没有支持 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 3

正如 Harry 所提到的，您所拥有的应该已经可以在实现自定义属性的浏览器中使用。

但是，如果您在 font-family 中使用自定义属性，则有一个重要警告：var() 不允许您修改或添加到现有的字体堆栈，因为自定义属性以与所有其他属性完全相同的方式级联。也就是说，表达式

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

产生两个可能值之一：

如果存在 --font-body 自定义属性声明，var(--font-body)
否则，Verdana, sans-serif

"Verdana, sans-serif" 不是 --font-body 中定义的字体堆栈的 部分， --font-body 中定义的系列应该是浏览器丢失或无法使用，它将不会退回到 Verdana 或 sans-serif；它会退回到浏览器选择的任意默认字体。

最糟糕的是，如果 --font-body 的值导致整个 font-family 声明无效，则该 font-family 声明将无效。

如果您希望在样式表中动态构建字体堆栈，则不能使用自定义属性。您将需要一个 CSS 预处理器。

如何在 CSS 变量回退中使用逗号？

How to use commas in a CSS variable fallback?

css

polymer

polymer-1.0

css-variables