JS判断浏览器是否支持某一个CSS3属性的方法
1、引子
css3的出现让浏览器的表现更加的丰富多彩,表现冲击最大的就是动画了,在日常书写动画的时候,很有必要去事先判断浏览器是否支持,尤其是在写CSS3动画库的时候。比如transition的animation-play-state,就只有部分浏览器支持。
2、检测方法
下面的方法可以使用脚本判断浏览器是否支持某一个CSS3属性:
/** *判断浏览器是否支持某一个CSS3属性 *@param{String}属性名称 *@return{Boolean}true/false *@version1.0 *@authorydr.me *2014年4月4日14:47:19 */ functionsupportCss3(style){ varprefix=['webkit','Moz','ms','o'], i, humpString=[], htmlStyle=document.documentElement.style, _toHumb=function(string){ returnstring.replace(/-(\w)/g,function($0,$1){ return$1.toUpperCase(); }); }; for(iinprefix) humpString.push(_toHumb(prefix[i]+'-'+style)); humpString.push(_toHumb(style)); for(iinhumpString) if(humpString[i]inhtmlStyle)returntrue; returnfalse; }
3、使用方法
alert(supportCss3('animation-play-state'));