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

Question

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

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

Answer 1

我们可以用CSS.supports做到这CSS.supports 。 这是CSS的@supports规则的JavaScript实现，目前可在Firefox，Chrome，Opera和Android浏览器中使用（请参阅我可以使用... ）。

CSS.supports()静态方法返回一个布尔值，指示浏览器是否支持给定的CSS功能。
- Mozilla开发者网络

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

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

如果浏览器支持CSS变量，则结果为true否则为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是在引入CSS全局的同时引入的，所以也没有必要检查它。）

创建browserCanUseCssVariables()函数

在您的情况下，我们可以通过简单地执行相同的逻辑来创建browserCanUseCssVariables()函数。 根据支持情况，下面的代码段会提示是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上测试）

Firefox v31

Chrome v38

Internet Explorer 11

Answer 2

使用CSS变量和证明用JavaScript和CSS样式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');
}

FIDDLE： 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());

似乎在我测试的所有浏览器中都有效。 可能代码可以优化。