js检查浏览器是否支持html5,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新特性