当我引入CSS变量时，为什么浏览器会尝试使用其他无效的属性声明？

debugcn 发表于 Dev

亨里克·N

我使用两个这样的背景图像声明来进行回退：

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，output

这个想法是例如让Firefox显示“常规” bg，因为它不支持-webkit-image-set；例如，让Chrome显示“ 1x”或“ 2x” bg（取决于分辨率），因为它确实支持-webkit-image-set。

到现在为止还挺好。

但是，如果我尝试通过CSS变量提供一个或多个图片网址（出于复杂的原因），它就会失败：

--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/edit？ html，css，output

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

但它在Chrome（88.0.4324.146）中可以正常工作。

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

陪同Afif

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

如果声明包含一个以初始值引用自定义属性的var（），则声明在计算值时可能是无效的，如上所述，或者声明使用一个有效的自定义属性，但在替换了var（）之后使用该属性值）功能，无效。发生这种情况时，该属性的计算值分别是该属性的继承值或它的初始值，具体取决于该属性是否被继承，就好像该属性的值已被指定为unset关键字一样。^参考

带有明显无效值的更明确的示例：

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

而且，当使用CSS变量时，不幸的是将使用第二条指令，从而使您的第一条指令无效。

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%;
}

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

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

.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
  );
}