css - 这是浏览器错误吗？具有背景颜色的变量继承

Question

我发现在css的变量函数中声明时，无法获取背景色来继承另一个元素的背景色。这是我遇到的一个例子。这是错误吗？

div,span{
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
}
/* Background test*/
.Xb {
  background: blue;
  height: 10px;
}

.Ybv {
  position: absolute;
  background: var(--mycolor,inherit);
}

.Yb {
  position: absolute;
  background: inherit;
}

/* Color test*/
.Xc {
  color: blue;
  height: 10px;
}

.Ycv {
  position: absolute;
  color: var(--mycolor,inherit);
}

.Yc {
  position: absolute;
  color: inherit;
}

/* Font test*/
.Xf {
  font-family: arial;
  height: 10px;
}

.Yfv {
  position: absolute;
  color: var(--myfont,inherit);
}

.Yf {
  position: absolute;
  color: inherit;
}

<div class="Xb">
  <div class="Ybv">Background inherit in var</div>
</div>

<br/><br/><br/>

<div class="Xb">
  <div class="Yb">Background inherit without var</div>
</div>

<br/><br/><br/>

<div class="Xc">
  <div class="Ycv">Color inherit in var</div>
</div>

<br/><br/><br/>

<div class="Xc">
  <div class="Yc">Color inherit without var</div>
</div>

<br/><br/><br/>

<div class="Xf">
  <div class="Yfv">Font inherit in var</div>
</div>

<br/><br/><br/>

<div class="Xf">
  <div class="Yf">Font inherit without var</div>
</div>

如您所见，除了示例“Background inherit in var”中的第一个子 div 之外，所有子 div 都具有正确的属性，因为它应该具有蓝色背景。它适用于颜色和字体系列。为什么不用背景颜色？

上面是结果表。也许需要更多测试？

我知道有绝对定位和继承的特殊情况，这会起作用吗？我试图创建一个包装器元素，但它没有做任何事情来解决它。

编辑:我使用 background 而不是 background-color 对其进行了测试，它的行为方式相同。

编辑:这不是重复的。其他问题讨论了将 inherit 分配给自定义属性的用法，以及为什么它没有意义。这个问题讨论了 inherit 在 var(--var, fallback) 函数中作为回退值的使用，以及与之相关的怪癖和浏览器之间的差异.

编辑:此处提交的错误报告:https://bugzilla.mozilla.org/show_bug.cgi?id=1544886

Answer 1

更新:该错误似乎已在最新的 Firefox 版本 (68) 中得到纠正。仍然有些属性在 Chrome 上无法正常工作

---

我已经简化了您的代码并使用其他属性进行了测试，发现它不适用于 height/box-shadow 但它可以使用其他属性。在 Fiferox 中，什么都不起作用。我认为这是一个错误。

.Xb {
  background-color: red;
  height: 100px;
  padding:0 30px;
  margin: 10px;
  box-shadow:2px 2px 20px blue;
  position:relative;
  border:1px solid green;
}

.Ybv {
  /*doesn't work*/
  background-color: var(--var,inherit);
  height:var(--var,inherit);
  box-shadow:var(--var,inherit);
  /*works on Chrome and not Fiferox */
  border:var(--var,inherit);
  padding:var(--var,inherit);
  margin:var(--var,inherit);
}

<div class="Xb">
  <div class="Ybv">inherit in var</div>
</div>

考虑the specification :

When a custom property has its initial value, var() functions cannot use it for substitution. Attempting to do so makes the declaration invalid at computed-value time, unless a valid fallback is specified.

还有

To substitute a var() in a property’s value:

1. If the custom property named by the first argument to the var() function is animation-tainted, and the var() function is being used in the animation property or one of its longhands, treat the custom property as having its initial value for the rest of this algorithm.
2. If the value of the custom property named by the first argument to the var() function is anything but the initial value, replace the var() function by the value of the corresponding custom property.
3. Otherwise, if the var() function has a fallback value as its second argument, replace the var() function by the fallback value. If there are any var() references in the fallback, substitute them as well.
4. Otherwise, the property containing the var() function is invalid at computed-value time.

很明显，在所有情况下，我们都有一个应该使用的有效回退值。

---

作为旁注，使用 color 和 font 等属性进行测试是不准确的，因为默认情况下它们是继承的，所以如果 var()失败了，你仍然会得到预期的结果。

---

顺便说一句，我们还可以读到:

A declaration can be invalid at computed-value time if it contains a var() that references a custom property with its initial value ... 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.

这就像一些声明无效，因此我们正在使用 initial 值。

还有一个小纸条说:

Note: Other things can also make a property invalid at computed-value time.

不确定那些其他东西是什么，但如果不是错误的话，这可能就是这里发生的事情。