为什么显示属性设置为继承CSS变量无效? [英] Why display property set to inherit with CSS variable doesn't work?

问题描述

我将div的显示属性设置为in line-block.然后，我创建了四个类:

• 无变量，它将显示设置为inherit
• var，它将显示设置为设置为inherit
的变量
• var-none，它将显示设置为设置为none
的变量
• var-default，它将显示设置为设置为inherit的变量，默认设置为grid

每个类使用的实际样式似乎并不正确，

• no-var类正确地将显示继承到block
• var类无法从变量获取inherit值，并显示为inline-block
• var-none类正确地将显示设置为none并被隐藏
• var-default类没有从变量获取inherit值，而是将显示设置为默认值

对于每个这些类，我为color属性添加了变量和默认值，它们均按预期工作.变量是否应该忽略inherit和unset值?

 :root {
  --display: inherit;
  --display-none: none;
  --color: red;
}
div  {
  display: inline-block;
  color: green;
}
.no-var {
  display: inherit;
  color: red;
}
.var {
  display: var(--display);
  color: var(--color);
}
.var-none {
  display: var(--display-none);
}
.var-default {
  display: var(--display, grid);
  color: var(--color, purple);
} 

 <div class="no-var">
  No variable
</div>
<div class="no-var">
  No variable
</div>
<div class="var">
  Variable
</div>
<div class="var">
  Variable
</div>
<div class="var-none">
  None
</div>
<div class="var-none">
  None
</div>
<div class="var-default">
  Default
</div>
<div class="var-default">
  Default
</div> 

解决方案

在这种情况下，inherit用作自定义属性的值，并且不会使用var()评估为inherit值. /p>

以下是了解此问题的基本示例:

 .box {
  --c:inherit;
  color:var(--c,red);
} 

 <div>
  <div class="box">I am a text</div>
</div>
<div style="--c:blue">
  <div class="box">I am a text</div>
</div> 

请注意在第二种情况下我们如何具有蓝色，因为自定义属性从顶部div继承了此值，然后将其评估为该值.在第一种情况下，我们将使用默认颜色，因为没有要继承的颜色.

换句话说，对于自定义属性，将考虑使用inherit，而不是将使用var()评估自定义属性的属性.您将找不到计算值等于继承的自定义属性，但计算值等于继承的值的自定义属性.

---

来自规范:

自定义属性是普通属性，因此可以在任何元素上声明它们，并使用常规继承和级联规则进行解析

I set the display property for divs to in line-block. I then created four classes:

• no-var, which sets display to inherit
• var, which sets display to a variable set to inherit
• var-none, which sets display to a variable set to none
• var-default, which sets display to a variable set to inherit and a default of grid

The actual style that is used by each class doesn't seem to be correct, though:

• The no-var class correctly inherits display to block
• The var class doesn't get the inherit value from the variable and displays as inline-block
• The var-none class correctly sets display to none and is hidden
• The var-default class doesn't get the inherit value from the variable and sets display to the default

For each of these classes I added variables and defaults for the color property, which all work as expected. Are variables supposed to ignore inherit and unset values?

:root {
  --display: inherit;
  --display-none: none;
  --color: red;
}
div  {
  display: inline-block;
  color: green;
}
.no-var {
  display: inherit;
  color: red;
}
.var {
  display: var(--display);
  color: var(--color);
}
.var-none {
  display: var(--display-none);
}
.var-default {
  display: var(--display, grid);
  color: var(--color, purple);
}

<div class="no-var">
  No variable
</div>
<div class="no-var">
  No variable
</div>
<div class="var">
  Variable
</div>
<div class="var">
  Variable
</div>
<div class="var-none">
  None
</div>
<div class="var-none">
  None
</div>
<div class="var-default">
  Default
</div>
<div class="var-default">
  Default
</div>

解决方案

In such situation, inherit is used as a value for the custom property and will not be evaluted to the inherit value using var().

Here is a basic example to understand the issue:

.box {
  --c:inherit;
  color:var(--c,red);
}

<div>
  <div class="box">I am a text</div>
</div>
<div style="--c:blue">
  <div class="box">I am a text</div>
</div>

Note how in the second case we have a blue color because the custom property inherited this value from the top div then it's getting evaluted to that value. In the first case, we will use the default color because there is nothing to inherit.

In other words, inherit will be considered for the custom property and not for the property where you will evalute the custom property using var(). You will not find a custom property with a computed value equal to inherit BUT with a computed value equal to the inherited value.

---

From the specification:

Custom properties are ordinary properties, so they can be declared on any element, are resolved with the normal inheritance and cascade rules

这篇关于为什么显示属性设置为继承CSS变量无效?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！