如何使用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)会起作用，但正如对此答案的评论中所述，Safari似乎有一个错误，使其失败。）

纯JavaScript示例

在Firefox上，此代码段将生成绿色背景，因为上面的CSS.supports调用会返回true。在不支持CSS变量的浏览器中，背景将为红色。

＆＃13;

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

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

创建browserCanUseCssVariables()函数

在您的情况下，我们可以通过简单地执行相同的逻辑来创建browserCanUseCssVariables()函数。以下代码段会提醒true或false，具体取决于支持。

＆＃13;

＆＃13;

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. :-(');
}

＆＃13;

＆＃13;

＆＃13;

结果（仅在Windows上测试）

Firefox 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');
}

FIDDLE：http://jsfiddle.net/g0naedLh/6/

Answer 3

除非Do stuff...是Javascript本身，否则您不需要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());

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