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

How to use commas in a CSS variable fallback?

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

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

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 样式,它将以衬线字体显示。

但是,如果变量不存在(自从我们将其注释掉后它就不存在),回退会起作用。

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

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

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

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

产生两个可能值之一:

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

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

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

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