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
