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

Question

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

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

这个想法是能够使用一个变量来设置一个font-family，这个变量的后备值是Verdana, sans-serif。

---

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

为了将来引用，我最终像这样为字体和字体系列后备使用了变量(目前看来是最简洁的做法):

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

Answer 1

以下是 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>