如何在CSS变量后备广告中使用逗号? [英] How to use commas in a CSS variable fallback?

问题描述

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

How can one use commas in the fallback value of a CSS variable?

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

E.g. this is fine: var(--color, #f00), but this is weird var(--font-body, Verdana, sans-serif).

该想法是能够使用后备值例如Verdana, sans-serif的变量设置font-family.

The idea is to be able to set a font-family using a variable with a fallback value of say Verdana, sans-serif.

编辑:这实际上对支持CSS属性的浏览器非常有效，但问题似乎出在Google Polymer的polyfills中.

This actually works pretty well for browsers that support CSS properties, but the issue seems to come from Google Polymer's polyfills.

为了将来参考，我最终将字体和字体家族后备变量都使用了变量，就像这样(目前看来，这是最干净的方法):

For future reference, I ended up using variables for both the font and the font family fallback like so (seems to be the cleanest way of doing it for now):

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

推荐答案

下面是 W3C规范 :(强调是我的)

The below is an extract from the W3C spec: (emphasis is mine)

注意:后备的语法与自定义属性的语法一样，允许使用逗号.例如，var(-foo，red，blue)定义红色，蓝色的后备；也就是说， 第一个逗号到函数结尾之间的任何内容都被视为后备值 .

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设置为后备值，则可以使用所讨论的语法.根据规范，它不需要任何引号.

As you can see from the above statement, if your intention is to set Verdana, sans-serif as fallback value when --font-body is not defined then the syntax given in question is expected to work. It does not require any quotes as per spec.

我没有支持CSS变量的浏览器，因此我无法测试以下代码，但应根据规范运行:

I don't have a browser that supports CSS variables and hence I couldn't test the following code but it should work based on the spec:

.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>

这篇关于如何在CSS变量后备广告中使用逗号?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！