CSS自定义属性对不识别值（如clamp()）的降级处理问题

核心结论 #

支持CSS自定义属性但不识别clamp()的浏览器里，.test-use-of-fun-size的font-size会取12px，不会变成无效值。

为什么会这样？ #

CSS自定义属性的赋值规则是最后一个有效声明优先：

• 你在:root里先后定义了两次--fun-size，第一次的12px是所有支持自定义属性的浏览器都能识别的有效声明；
• 第二次使用clamp()的声明，在不支持该函数的浏览器中会被判定为无效声明，直接被忽略；
• 此时浏览器会回退到上一个有效的--fun-size赋值，也就是12px。

对你迁移方案的实用建议 #

这种“先写降级值、再写现代值”的写法刚好适配你的需求：

• 现代浏览器能用上响应式的clamp()效果，旧浏览器也能拿到稳定的12px兜底；
• 相比你之前臃肿的SASS插值方案，原生自定义属性不需要预编译，新增特性时直接加声明就行，维护成本低很多。

内容的提问来源于stack exchange，提问作者Walrus