这是浏览器错误吗?具有背景色的变量的继承 [英] Is this a browser bug? Inheritence in variables with background-color

问题描述

我发现在CSS的变量函数中声明背景色时，无法继承其他元素的背景色.这是我遇到的一个例子.这是一个错误吗?

I found that I couldn't get the background color to inherit the background colour of another element when declared inside a variable function in css. Here is an example of what I am encountering. Is this a bug?

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>

如您所见，所有子div都具有正确的属性，但示例"BackgroundInherited in var"中的第一个除外，因为它应该具有蓝色背景.它适用于颜色和字体系列.为什么不使用背景颜色?

As you can see the sub-divs all have the correct properties, except for the first one in the example "Background inherit in var", because it should have a blue background. It works with color and with font-family. Why not with background-color?

上面是结果表.也许需要更多测试吗?

Above is a table of the results. Perhaps more tests are necessary?

我知道有些情况下具有绝对的定位和继承性，这会起到一定的作用吗?我试图创建一个wrapper元素，但是它并没有解决任何问题.

I understand that there are special cases with absolute positioning and inheritance, could this play a factor? I tried to create a wrapper element but it didn't do anything to solve it.

我使用background而不是background-color对其进行了测试，并且其行为方式相同.

I tested it using background instead of background-color and it behaved the same way.

这不是重复项.其他问题讨论将inherit分配给自定义属性的用法以及为什么它没有意义.该问题讨论了var(--var, fallback)函数中inherit作为后备值的用法，以及与此相关的怪癖以及浏览器之间的差异.

This is not a duplicate. Other questions discuss the use of inherit being assigned to a custom property and why it doesn't make sense. This question discusses the use of inherit as a fallback value in the var(--var, fallback) function, as well as the quirks associated with it and the differences between browsers.

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

Bug report filed here: https://bugzilla.mozilla.org/show_bug.cgi?id=1544886

推荐答案

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

Update: the bug seems to be corrected in the last Firefox version (68). Stil some properties aren't working fine on Chrome

我简化了代码并使用其他属性进行了测试，发现它不适用于height/box-shadow，但是可以与其他属性一起使用.在Fiferox中没有任何工作.我认为这是一个错误.

I have simplified your code and tested with other properties and found that it's not working with height/box-shadow but it's working with other propeties. In Fiferox nothing is working. I think it's a 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>

考虑规范:

当自定义属性具有其初始值时，var()函数无法将其用于替换.尝试这样做会使声明在计算值时间无效，除非指定了有效的后备.

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.

也

要在属性值中替换var():

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

1. 如果由var()函数的第一个参数命名的自定义属性是受动画污染的，并且var()函数正在animation属性或它的长手之一中使用，则将custom属性视为具有其初始值该算法其余部分的价值.
2. 如果由var()函数的第一个参数命名的自定义属性的值不是初始值，请用相应的自定义属性的值替换var()函数.
3. 否则，如果var()函数具有后备值作为其第二个参数，则用后备值替换var()函数.如果后备中有任何var()引用，也可以替代它们.
4. 否则，包含var()函数的属性在计算值时间无效.

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.

很明显，在所有情况下，我们都有应使用的有效后备值.

It's clear that in all the cases we have a valid fallback value that should be used.

作为旁注，使用color和font之类的属性进行测试是不准确的，因为默认情况下继承了，因此，如果var()失败，您仍将获得预期的结果.

As a side note, testing with properties like color and font is inaccurate because the are inherited by default so if the var() is failing you will still have the expected result.

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

By the way, We can also read that:

如果声明包含一个以其初始值引用自定义属性的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值.

It's like some of declarations are invalidated thus we are using the initial value.

还有一个小字条:

注意:其他情况也会使属性在计算值时间无效.

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

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

Not sure what are those other things but probably this is what is happening here if it's not a bug.

这篇关于这是浏览器错误吗?具有背景色的变量的继承的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！