CSS 变量继承和回退

Question

我的问题是为什么 CSS 变量需要添加回退的概念，而不像其他 CSS 属性那样仅仅依赖于继承。

例如：

:root {
 --color1: red;
}

body {
 color: var(--color1);
}

body p {
 color: var(--color2);
 --color2: blue;
}

body span {
  --color3: green;
  color: var(--color3);
  color: yellow;
  color: var(--color4);
}

<body>
  Text 1
  <p>
    Text 2
  </p>
  <span>
    Text 3
  </span>
</body>

文本 3 最终变成了红色，而不是绿色或黄色。尽管该级别上存在有效属性，但它采用父颜色值，而不是验证同一级别上是否存在其他有效值。当变量名无效时会发生这种情况。

显然 CSS 变量有一个特殊的回退，因此您需要使用类似的东西：

color: var(--color4, yellow);

但这又意味着颜色的重复，因为

color: var(--color4, --color3);

不起作用。两者都不是：

color: var(--color3, yellow, blue);

或任何其他多个值。

也不支持inherit、currentColor、initial等关键字。所以我不确定如何依赖继承，因为显然我需要对给定的值非常明确。在 Firefox 57.0.1 和 Chrome 63.

上测试

我知道 CSS variables are still as Working Draft 所以也许这就是当前行为的原因。

Answer 1

第一个

并非 CSS 中的所有属性都被继承，请查看这些链接，以便您了解哪些 CSS 属性被继承以及如何应用继承：

https://www.w3.org/TR/CSS22/propidx.html
https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance

第二个

声明重复属性的顺序很重要。

如果你要应用的颜色是green这不一样：

// correct way to declare fallback color, it will be green and yellow if --color3 was not defined
body span {
  --color3: green;
  color: yellow;
  color: var(--color3);
}

如：

body span { // incorrect way to declare fallback color
  --color3: green;
  color: var(--color3);
  color: yellow;
  color: var(--color4);
}

The property color: var(--color4); will be taken since there is no invalid syntax on this declaration but since there is no variable declared as --color4 the inherited color will be applied (in this case from body { color: var(--color1) })

Because color is a inherited property

第三

将回退与 var() 结合使用是另一种解决方案，但前一个是针对不支持 var()

的旧浏览器的回退

另外，你用错了，var()的fallback的正确使用方法应该是这样的：

color: var(--color4, var(--color3));

或者这个：

color: var(--color4, var(--color3, yellow));

var() 只接受 2 个参数，您要使用的值和备用值。
在 following link

中查看如何使用它的语法

结论

由于 var() 并非在所有浏览器中都可用，因此我会选择正确使用重复属性，或者您可以同时使用这两种浏览器他们。

:root {
 --color1: red;
}

body {
 color: var(--color1);
}

body p {
 color: var(--color2);
 --color2: blue;
}

body span {
  --color3: green;
  color: yellow;
  color: var(--color4, var(--color3));
}

<body>
  Text 1
  <p>
    Text 2
  </p>
  <span>
    Text 3
  </span>
</body>

Answer 2

正如 JoseAPL 所说，var() 表达式接受回退参数而不是默认继承的原因很简单，因为虽然自定义属性做继承，但并不是所有的您将在 do.

中使用它们的标准属性

另一方面，如果您问为什么 var() 表达式不默认为下一个最佳级联值，那是因为在计算 var() 表达式时， 没有其他值可以退回到，因为级联中的所有其他声明都已被删除。请参阅第 3.1 节，其中定义了术语 invalid at computed-value time:

Note: The invalid at computed-value time concept exists because variables can’t "fail early" like other syntax errors can, so by the time the user agent realizes a property value is invalid, it’s already thrown away the other cascaded values.

话虽如此，您可以提供自定义属性作为后备值（只要它是，原因与上面解释的相同) — 自定义属性只需要出现在它自己的 var() 表达式中，因为回退值是一个声明 value，而不是属性名字.

所以结果是 var() 嵌套在另一个 var():

body span {
  --color3: green;
  color: var(--color3);
  color: yellow;
  color: var(--color4, var(--color3));
}

:root {
 --color1: red;
}

body {
 color: var(--color1);
}

body p {
 color: var(--color2);
 --color2: blue;
}

body span {
  --color3: green;
  color: var(--color3);
  color: yellow;
  color: var(--color4, var(--color3));
}

<body>
  Text 1
  <p>
    Text 2
  </p>
  <span>
    Text 3
  </span>
</body>

CSS 变量继承和回退

CSS Variables inheritance and fallback

css

inheritance

css-variables

第一个

第二个

第三

结论