如何使用 JavaScript 检测 CSS 变量支持？

最新版本的 Firefox 支持CSS 变量 http://www.w3.org/TR/css-variables/，但 Chrome、IE 和许多其他浏览器没有。应该可以访问 DOM 节点或编写一个小方法来返回浏览器是否支持此功能，但我还没有找到任何当前能够执行此操作的方法。我需要的是一个解决方案，如果浏览器不支持该功能，我可以将其用作运行代码的条件，例如：

if (!browserCanUseCssVariables()) {
  // Do stuff...
}

我们可以这样做CSS.supports https://developer.mozilla.org/en-US/docs/Web/API/CSS.supports。这是 CSS 的 JavaScript 实现@supports目前可在 Firefox、Chrome、Opera 和 Android 浏览器中使用的规则（请参阅我可以用吗... http://caniuse.com/#search=css.supports).

The CSS.supports()静态方法返回一个布尔值，指示浏览器是否支持给定的 CSS 功能。
– Mozilla 开发者网络 https://developer.mozilla.org/en-US/docs/Web/API/CSS.supports

有了这个，我们可以简单地：

CSS.supports('color', 'var(--fake-var)');

结果将是true如果浏览器支持 CSS 变量，并且false如果没有。

（你可能会认为CSS.supports('--fake-var', 0)会起作用，但正如对此答案的评论中所指出的，Safari 似乎有一个错误导致它失败。）

纯 JavaScript 示例

在 Firefox 上，此代码片段将产生绿色背景，就像我们的CSS.supports调用上面的返回值true。在不支持 CSS 变量的浏览器中，背景将为红色。

var body = document.getElementsByTagName('body')[0];

if (window.CSS && CSS.supports('color', 'var(--fake-var)')) {
  body.style.background = 'green';
} else {
  body.style.background = 'red';
}

请注意，这里我还添加了检查以查看是否window.CSS存在 - 这将防止在不支持此 JavaScript 实现的浏览器中抛出错误并将其视为false以及。 (CSS.supports同时推出CSSglobal 已被引入，因此也无需检查它。）

创建browserCanUseCssVariables()功能

对于您的情况，我们可以创建browserCanUseCssVariables()只需执行相同的逻辑即可实现功能。下面的代码片段将发出警报true or false取决于支持。

function browserCanUseCssVariables() {
  return window.CSS && CSS.supports('color', 'var(--fake-var)');
}

if (browserCanUseCssVariables()) {
    alert('Your browser supports CSS Variables!');
} else {
    alert('Your browser does not support CSS Variables and/or CSS.supports. :-(');
}

结果（全部仅在 Windows 上测试）

火狐浏览器 v31

铬 v38

互联网浏览器 11