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

Question

最新版本的 Firefox 支持CSS Variables，但 Chrome、IE 和许多其他浏览器不支持。应该可以访问 DOM 节点或编写一个返回浏览器是否支持此功能的小方法，但我无法找到当前能够执行此操作的任何内容。我需要的是一个解决方案，如果浏览器不支持该功能，我可以将其用作运行代码的条件，例如：

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

Answer 1

我们可以通过CSS.supports 做到这一点。这是 CSS 的 @supports 规则的 JavaScript 实现，目前可在 Firefox、Chrome、Opera 和 Android 浏览器中使用（参见 Can I Use...）。

CSS.supports() 静态方法返回一个布尔值，指示浏览器是否支持给定的 CSS 功能。
– Mozilla Developer Network

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

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

如果浏览器支持 CSS 变量，结果将是 true，如果不支持，结果将是 false。

（您可能认为 CSS.supports('--fake-var', 0) 会起作用，但正如 cmets 在此答案中所指出的那样，Safari 似乎有一个错误使其失败。）

纯 JavaScript 示例

在 Firefox 上，此代码 sn-p 将产生绿色背景，因为我们上面的 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 和CSS global 是同时引入的，所以也不需要检查。）

创建browserCanUseCssVariables() 函数

在您的情况下，我们可以通过简单地执行相同的逻辑来创建 browserCanUseCssVariables() 函数。下面这个 sn-p 将根据支持提醒true 或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

Chrome v38

Internet Explorer 11

Answer 2

使用 CSS 变量设置 CSS 样式，并使用 Javascript 和 getComputedStyle() 进行验证（如果已设置）... 很多浏览器都支持getComputedStyle()：http://caniuse.com/#feat=getcomputedstyle

HTML

<div class="css-variable-test"></div>

CSS

:root {
  --main-bg-color: rgb(1, 2, 3); /* or something else */
}

.css-variable-test {
    display: none;
    background-color: var(--main-bg-color);
}

JavaScript

var computedStyle = getComputedStyle(document.getElementsByClassName('css-variable-test')[0], null);

if (computedStyle.backgroundColor == "rgb(1, 2, 3)") { // or something else
    alert('CSS variables support');
}

小提琴：http://jsfiddle.net/g0naedLh/6/

Answer 3

您不需要 Javascript 来检测浏览器是否支持自定义属性，除非 Do stuff... 本身就是 Javascript。由于您检测到的支持是 CSS，我假设您尝试做的事情都是 CSS。因此，如果有办法从这个特定问题中删除 JS，我会推荐Feature Queries。

@supports (display: var(--prop)) {
  h1 { font-weight: normal; }
  /* all the css, even without var() */
}

功能查询测试对语法的支持。您不必查询display；你可以使用任何你想要的属性。同样，--prop 的值甚至不需要存在。您所做的只是检查浏览器是否知道如何读取该语法。

（我只是选择了display，因为几乎每个浏览器都支持它。如果您使用flex-wrap 或其他东西，您将无法捕捉到支持自定义道具但不支持flexbox的浏览器。）

旁注：我更喜欢称它们为 自定义属性，因为它们就是这样：作者定义的属性。是的，您可以将它们使用作为变量，但它们作为属性有一定的优势，例如 DOM 继承：

body    { --color-heading: green; }
article { --color-heading: blue; }
h1      { color: var(--color-heading); } /* no need for descendant selectors */

Answer 4

我在让 window.CSS.supports 方法在 chrome 49 中测试 css 变量时遇到问题（即使它具有本机支持）。最终这样做了：

var supportsCssVars = function() {
    var s = document.createElement('style'),
        support;

    s.innerHTML = ":root { --tmp-var: bold; }";
    document.head.appendChild(s);
    support = !!(window.CSS && window.CSS.supports && window.CSS.supports('font-weight', 'var(--tmp-var)'));
    s.parentNode.removeChild(s);
    return support;
}

console.log("Supports css variables:", supportsCssVars());

似乎可以在我测试过的所有浏览器中使用。 不过可能代码可以优化。