CSS 自定义属性，具有无法识别的 CSS 值的回退（例如，clamp()）

Question

就目前情况而言，根据 CanIUse，CSS 自定义属性在全球范围内享有 99.05% 的支持率。这大部分是由于 IE 支持具有多种关闭多边形填充之一，特别是当所述变量基于

:root

时。

但是，浏览器与较新的 css 声明的兼容性的限制并没有就此结束。当支持自定义属性但不支持该值时，无法识别的值对 css 自定义属性有何影响。

:root {
  --fun-size: 12px;
  --fun-size: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
}

现在：

.test-use-of-fun-size {
  font-size: var(--fun-size);
}

如果不明确支持自定义属性，则 font-size 将表现得好像没有收到值一样，并且默认为当前继承的值。如果支持自定义属性但不支持钳位怎么办？它是否收到了 12px 还是收到了无效值。

上下文，我正在尝试摆脱不断爆炸式的 SASS 负载，它解决了所有这些问题，但我编写的用于插入所有内容的库的可扩展性需要不断记住如此多的变量，以至于每次出现新的漏洞时都会很痛苦如果整个事情可以简单地写出来就好了。

Answer 1

要测试这样的事情，请考虑一个随机函数来看看发生了什么：

:root {
  --fun-size: 45px;
  --fun-size: random_function(0.75rem, 0.5rem + 1vw, 1.25rem);
}

body {
  font-size: var(--fun-size);
}

some text content

如您所见，将不会使用

45px

，并且将始终使用第二个值（即使它明显无效）。

从规格来看：

如果某个属性包含一个或多个 var() 函数，并且这些函数在语法上有效，则整个属性的语法必须假定在解析时有效。仅在替换 var() 函数后，在计算值时对其进行语法检查。 ^参考