CSS var() 回退是否在不受支持的浏览器中工作？答案

【问题标题】：Does CSS var() fallback work in unsupported browsers?CSS var() 回退是否在不受支持的浏览器中工作？
【发布时间】：2021-03-24 06:02:28
【问题描述】：

这些天我正在使用 CSS var，所以我想到了一件事，我想知道 如果我为 CSS var() 函数设置后备，这个后备将如何工作在不完全支持 CSS var 的旧浏览器中。 是否会被应用或视为未知的 CSS 功能？

长话短说，现在我为这样的属性编写了两行 CSS：

:root{
   --box-height: 350px;
}

.box{
   height: 350px; // FALLBACK for older browsers.
   height: var(--box-height);
}

我的目的是为旧浏览器提供回退，但如果我这样写就可以了：

:root{
   --box-height: 350px;
}

.box{
   height: var(--box-height, 350px); // Does it work in older browsers really?
}

它是否可以在旧版浏览器中使用？没有关于我在说什么的透明文档你的想法是什么？

【问题讨论】：

不，它不会，height: var(--box-height, 350px); 并不是真正的后备，它只是意味着如果现代浏览器中未定义变量，则将应用 350px。但是对于旧版浏览器，变量名不是有效的 css。
但是在问这里之前你真的应该自己测试一下。
@Paulie_D 像这样覆盖属性，这是我们唯一能做的吗？
@Paulie_D 这是一个分享知识的地方。我可以，但我打赌这将是谁开始使用 CSS vars 的问题。

【解决方案1】：

它是否可以在旧版浏览器中运行？

不，不会的。如果浏览器无法识别var()，则无法考虑您在此处定义的后备值。整个值将无效。

如果您想考虑使用旧浏览器，则应坚持使用您的第一种语法。

【讨论】：