css - 如果 CSS 内容包含未声明的 CSS 变量，是否应该显示它？

Question

以下 CSS 代码将根据是否--test2定义变量生成不同的结果：

html::before {
    content: "test1:" var(--test1) " test2:" var(--test2);
}

如果定义了--test1和--test2，则测试内容将显示在视口中。如果--test1已定义但未定义，--test2则不显示任何测试内容。

这是正确的行为吗？如果是，为什么？

标签： csscss-variablescss-content

Answer 1

从规范：

一个声明在计算值时可能是无效的，如果它包含一个var()引用一个自定义属性的初始值，如上所述，或者如果它使用一个有效的自定义属性，但是属性值，在替换它的 var() 函数之后，是无效的。发生这种情况时，属性的计算值要么是属性的继承值，要么是其初始值，具体取决于该属性是否被继承，就好像该属性的值已被指定为未设置关键字一样。

在您的情况下，您没有定义变量，因此它具有initial作为值，这也将content回退到其初始值（即none），因此不会显示任何内容。

---

从相同的规范：

当自定义属性具有初始值时，var() 函数不能使用它进行替换。除非指定了有效的回退，否则尝试这样做会使声明在计算值时无效。

所以最好考虑一个后备：

html::before {
    content: "test1:" var(--test1,"") " test2:" var(--test2,"");
}