引入CSS变量时，为什么浏览器会尝试使用其他无效的属性声明? [英] Why does the browser try to use an otherwise invalid property declaration when I introduce a CSS variable?

问题描述

我使用两个这样的背景图像声明来获取后备广告:

I use two background-image declarations like this to get a fallback:

background-image: url(https://via.placeholder.com/300x150.png?text=regular);
background-image: -webkit-image-set(
  url(https://via.placeholder.com/300x150.png?text=1x) 1x,
  url(https://via.placeholder.com/600x300.png?text=2x) 2x
);

JS bin: https://jsbin.com/jadoharoyi/edit?html，CSS，输出

这个想法是为了Firefox显示常规"bg，因为它不支持-webkit-image-set，例如Chrome浏览器显示"1x"或"2x"bg(取决于分辨率)，因为它支持支持-webkit-image-set.

The idea is for e.g. Firefox to show the "regular" bg because it doesn't support -webkit-image-set, and for e.g. Chrome to show the "1x" or "2x" bg (depending on resolution) because it does support -webkit-image-set.

到目前为止一切都很好.

So far so good.

但是，如果我尝试通过CSS变量提供一个或多个图片网址(对于原因)，它掉下来了:

But if I try to provide one or more of the image URLs via CSS variables (for convoluted reasons), it falls down:

--image-1x: url(https://via.placeholder.com/300x150.png?text=1x);

background-image: url(https://via.placeholder.com/300x150.png?text=regular);
background-image: -webkit-image-set(
  var(--image-1x) 1x,
  url(https://via.placeholder.com/600x300.png?text=2x) 2x
);

JS bin: https://jsbin.com/vojiboqije/1/编辑吗?html，css，输出

现在，Firefox(在macOS Big Sur 11.1上为85.0.2)根本不显示bg图像.据我所知，Firefox突然很高兴尝试使用它不支持的第二个背景图像声明.

Now, Firefox (85.0.2 on macOS Big Sur 11.1) doesn't show a bg image at all. As far as I can tell, Firefox is suddenly happy to try to use the second background-image declaration, which it doesn't support.

但是它在Chrome(88.0.4324.146)中可以正常工作.

But it works fine in Chrome (88.0.4324.146).

我不明白为什么.有任何想法吗?这是一个错误吗?还是我误会了?

I don't understand why. Any ideas? Is this a bug? Or a misunderstanding on my part?

推荐答案

这是CSS变量的工作方式.使用CSS变量时，浏览器只能在运行时评估该值，因此在我们评估该变量之前，该值将被视为有效(或者可以说是在待机模式下)，如果浏览器发现整个值无效，它将回退初始或继承:

This how CSS variables are meant to work. When using CSS variables the browser can only evalute the value at run-time so the value will be considered as valid (or lets say in a standby mode) until we evalute the variable and if the browser find the whole value invalid, it will fallback to initial or inherit:

如果声明包含一个以初始值引用自定义属性的var()，则声明在计算值时可能无效，如上所述；或者，如果它使用有效的自定义属性，但该声明使用属性值，则发生这种情况时，取决于属性是否继承，属性的计算值要么是属性的继承值，要么是其初始值，就像该属性的值已指定为unset关键字. ^参考

A declaration can be invalid at computed-value time if it contains a var() that references a custom property with its initial value, as explained above, or if it uses a valid custom property, but the property value, after substituting its var() functions, is invalid. When this happens, the computed value of the property is either the property’s inherited value or its initial value depending on whether the property is inherited or not, respectively, as if the property’s value had been specified as the unset keyword. ^ref

一个更明确的示例，其值显然无效:

A more explicit example with a clearly non valid value:

html {
  background:linear-gradient(red,blue); /* this will be used */
  background:strange-gradient(red,blue); /* this is a joke */
  
  min-height:100%;
}

不幸的是，当使用CSS变量时，将使用第二个变量，这会使您的第一条指令无效.

And when using CSS variable, the second one will be used unfortunately making your first instruction useless.

html {
  --c:red;

  background:linear-gradient(red,blue);  /* this will be ignored */
  background:strange-gradient(var(--c),blue); /* the joke is being used ..*/
  
  min-height:100%;
}

这种行为在某种程度上是合乎逻辑的，因为通过更改变量，我们可以使值有效(如果先前无效)或无效(如果先前有效)，因此浏览器应该考虑它.

This behavior is somehow logical since by changing a variable we can make a value valid (if it was previously invalid) or invalid (if it was previously valid) so the browser should consider it.

对于您的特殊情况，您可以考虑使用伪元素技巧:

For your particular case you can consider pseudo element trick:

.my-div {
  width: 300px;
  height: 150px;
  background-color: red;
  position:relative;
  z-index:0;
  
  --image-1x: url(https://via.placeholder.com/300x150.png?text=1x);

  background-image: url(https://via.placeholder.com/300x150.png?text=regular);
}
/* the pseudo element will cover the main background if it's valid */
.my-div::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-image: -webkit-image-set(
    var(--image-1x) 1x,
    url(https://via.placeholder.com/600x300.png?text=2x) 2x
  );
}

<div class="my-div">
</div>

这篇关于引入CSS变量时，为什么浏览器会尝试使用其他无效的属性声明?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！