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

}