CSS 变量和计算中的错误：如何获得错误输出？

Question

我开始使用 CSS 变量来尝试制作模块化尺寸比例。但我很快就遇到了忽略 CSS 值的问题，但我没有看到任何关于错误的迹象。

让我们看看问题的最小再现：

:root {
  --ratio: 1.25;
  --font-size-medium-heading: calc(var(--ratio) * 1rem);
  --font-size-large-heading: calc(var(--font-medium-heading) * var(--ratio)); /* note the typo in the var */
}

h1 {
  font-size: var(--font-size-large-heading);
}

我故意打错字看看会发生什么（我在变量名中省略了-size）。由于我的标题变小了，我尝试查询我的新 CSS 变量的值：

getComputedStyle(document.documentElement).getPropertyValue('--font-size-large-heading') === ''

它返回一个空字符串。

让我们前往 Chrome 的样式检查器，看看我是否收到警告标志⚠️：

MDN 建议使用 CSS 验证器。所以让我们试试这个：https://jigsaw.w3.org/css-validator/validator

我的猜测是这个验证器并不是最新的（如果有人还在使用它的话）。

更新 我知道根据规范它是一个有效的语句，但它的计算时间值是无效的。我想知道这些，因为它只是将真正的问题隐藏在一个非常常见的错误中（如果你曾经花了一天时间发现 Angular 在模板中期望 "'thing'" 而不是 "thing"，你就会明白如何bad 没有关于无效值的输出）。

有没有办法获得关于计算时间无效 CSS vars 和 calc 值的错误输出？

Answer 1

首先是spec

如果一个属性包含一个或多个var() 函数，并且这些函数在语法上是有效的，则必须假定整个属性的语法在解析时是有效的。在 var() 函数被替换之后，它只在计算值时进行语法检查。

这就是为什么您在 chrome devtool 中看不到黄色三角形的原因，因为从语法上讲它是有效的。

---

从spec关注第四条规则

4. 否则，包含 var() 函数的属性在计算值时无效

还有

如果声明包含引用具有 保证无效值的自定义属性的 var()，则声明可能在计算值时无效强>

代码中的第三行包含一个 var()，它引用了一个具有 保证无效值

的 css 变量

---

为什么？

自定义属性的初始值为guaranteed-invalid value。正如§ 3 Using Cascading Variables: the var() notation 中定义的那样，使用 var() 将自定义属性替换为 this 作为其值会使引用它的属性在计算值时无效。

一个不存在的 css 变量基本上创建了它，它的初始值是保证无效值。

---

计算的初始值是多少？

此值序列化为空字符串，但实际上将空值写入自定义属性（如--foo: ;）是有效（空）值，而不是保证无效值。如果出于某种原因，想要手动将变量重置为保证无效值，则使用关键字 initial 即可。

这就是getComputedStyle(document.documentElement).getPropertyValue('--font-size-large-heading')返回“空字符串”的原因（保证无效值）