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

2016-11-07 1338 2 编辑:网站前端设计伍林 来源:网页设计书籍

在使用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

}

本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联
我们猜你喜欢