JavaScript判断浏览器是否支持CSS3属性

在使用css3的一些属性时,为了兼顾低端浏览器对CSS3的不友好性,往往需要知道某些浏览器是否支持要使用的CSS3属性,以此来做向下适配。比如常见的CSS3动画就很有必要检测浏览器是否支持。下面分享几种方法:

第一种:JavaScript比较常用下面这个代码

var support_css3 = (function() {
   var div = document.createElement('div'),
      vendors = 'Ms O Moz Webkit'.split(' '),
      len = vendors.length;
 
   return function(prop) {
      if ( prop in div.style ) return true;
 
      prop = prop.replace(/^[a-z]/, function(val) {
         return val.toUpperCase();
      });
 
      while(len--) {
         if ( vendors[len] + prop in div.style ) {
            return true;
         } 
      }
      return false;
   };
})();

使用:检查是否支持transform

if(support_css3('transform')){

}else{

}

第二:JavaScript方法2:不支持ie6

function isPropertySupported(property)
{
	return property in document.body.style;
}

使用:
记得上面的属性,要用backgroundColor替换background-color

if(isPropertySupported('opacity')){

}else{

}

第三:CSS.supports

CSS.suports是CSS3 @support 规则中比较特别的一个,每一个支持@support规则的都支持下面这个函数(不推荐这种方法,毕竟@support也有兼容性,某些浏览器可能支持CSS3属性中的一个,但却不支持@support)

//pass the same string as you pass to the @supports rule
if(CSS.supports("(background-color: red) and (color:white"))
{
    document.body.style.color = "white";
    document.body.style.backgroundColor = "red";
}

最后再分享一个判断浏览器是否支持某些HTML5属性的函数,比如input属性是否支持palaceholder.

function elementSupportsAttribute(element, attribute) {
  var test = document.createElement(element);
  if (attribute in test) {
    return true;
  } else {
    return false;
  }
};

用法:

if (elementSupportsAttribute("textarea", "placeholder") {

} else {
   // fallback
}

阅读更多:使用JavaScript检测是否支持CSS3、HTML5新特性

「五年博客,如果觉得我的文章对您有用,请帮助本站成长」

订阅周报 关注微博

原创文章:JavaScript判断浏览器是否支持CSS3属性 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/detecting-css3-support.html)

发表评论

请登录后发表评论: