Question

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

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

我们的想法是能够使用后备值为font-family的变量设置Verdana, sans-serif。

编辑：对于支持CSS属性的浏览器，这实际上非常有效，但问题似乎来自Google Polymer的polyfills。

为了将来的参考，我最终使用了字体和字体系列回退的变量，这样做（似乎是目前最干净的方式）：

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变量的浏览器，因此我无法测试以下代码，但它应该根据规范运行：

＆＃13;

.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 */
}

＆＃13;

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

＆＃13;

Answer 2

正如Harry提到的，你所拥有的东西应该已经在实现自定义属性的浏览器中工作了。

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

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

导致两个可能值之一：

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

“Verdana，sans-serif”是{em>不在--font-body中定义的字体堆栈的一部分，如果在--font-body中定义的系列缺失或以其他方式浏览器不可用，不会回归到Verdana或sans-serif;它将改为回退到浏览器选择的任意默认字体。

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

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

Answer 3

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

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通常以serif字体显示。如果取消注释p样式，它将以serif字体显示。

但是，如果变量不存在（自从我们评论出来之后它就没有了），那么回退就可以了。

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

3 个答案: