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

Question

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

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

Answer 1

We can do this with CSS.supports. This is the JavaScript implementation of CSS's @supports rule which is currently available in Firefox, Chrome, Opera and Android Browser (see Can I Use...).

The CSS.supports() static methods returns a Boolean value indicating if the browser supports a given CSS feature, or not.
– Mozilla Developer Network

With this, we can simply:

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

The result of this will be true if the browser supports CSS variables, and false if it doesn't.

(You might think that CSS.supports('--fake-var', 0) would work, but as noted in comments on this answer Safari seems to have a bug there making it fail.)

Pure JavaScript Example

On Firefox this code snippet will produce a green background, as our CSS.supports call above returns true. In browsers which do not support CSS variables the background will be red.

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

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

Note that here I've also added checks to see whether window.CSS exists - this will prevent errors being thrown in browsers which do not support this JavaScript implementation and treat that as false as well. (CSS.supports was introduced at the same time CSS global was introduced, so there's no need to check for it as well.)

Creating the browserCanUseCssVariables() function

In your case, we can create the browserCanUseCssVariables() function by simply performing the same logic. This below snippet will alert either true or false depending on the support.

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

The Results (all tested on Windows only)

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

小提琴：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; 你可以使用任何你想要的属性。同样，--propneed 的价值甚至不存在。您所做的只是检查浏览器是否知道如何阅读该语法。

（我之所以选择display，是因为几乎每个浏览器都支持它。如果你使用flex-wrap什么的，你不会捕捉到支持自定义 props 但不支持 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());

似乎适用于我测试过的所有浏览器。可能代码可以优化。