如何使用JavaScript检测CSS Variable支持？

Firefox的最新版本支持 CSS Variables,但Chrome,IE和其他浏览器的数量并不如此.应该可以访问DOM节点或者写一个方法,返回浏览器是否支持此功能,但是我还没有找到任何当前能够执行此操作的功能.我需要的是一个解决方案,如果浏览器不支持该功能,我可以使用它作为条件来运行代码,如下所示：

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

解决方法

我们可以使用 CSS.supports.这是CSS的@supports规则的JavaScript实现,目前在Firefox,Chrome,Opera和Android浏览器中可用(参见 Can I Use…).

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

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

window.CSS.supports('--fake-var',0);

如果浏览器支持CSS变量,结果将是真的,如果没有,则返回false.

纯JavaScript示例

在Firefox上,此代码片段将产生一个绿色背景,因为我们的CSS.supports的结果是上述’-fake-variable’返回true.在不支持CSS变量的浏览器中,背景将为红色.

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

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

请注意,在这里,我还添加了检查以查看window.CSS和window.CSS.support是否存在 – 这将防止在不支持此JavaScript实现的浏览器中抛出错误,并将其视为false.

创建browserCanUseCssVariables()函数

在你的情况下,我们可以通过简单地执行相同的逻辑来创建browserCanUseCssVariables()函数.下面的代码片段将根据支持提示true或false.

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

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

如何使用JavaScript检测CSS Variable支持？

解决方法

相关文章