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

如何在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)

解决方法

以下是 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,sans-serif); 
  /* should result in font-family: Arial */
}
.component .item2 {
  font-family: var(--font-body,sans-serif);
  /* should result in font-family: Verdana,sans-serif */
}

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