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

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 都具有正确的属性，因为它应该有蓝色背景。它适用于颜色和字体系列。为什么不使用背景颜色？

以上是 table 的结果。也许需要更多的测试？

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

编辑：我使用 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 中，什么都不起作用。我认为这是一个 bug.

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

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.

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.

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.

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.

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

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

Is this a browser bug? Inheritence in variables with background-color

css

background-color

css-variables