CSS3 的出现让浏览器的表现更加的丰富多彩, 表现冲击最大的就是动画了, 在日常书写动画的时候, 很有必要去事先判断浏览器是否支持, 尤其是在写 CSS3 动画库的时候.
下面的方法可以使用脚本判断浏览器是否支持某一个 CSS3 属性:
第一种: JavaScript 比较常用下面这个代码判断浏览器是否支持 css3 属性:
- 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.supports() 静态方法返回一个 Boolean 值, 用来校验浏览器是否支持一个给定的 CSS 特性.)
语法:
- boolValue = CSS.supports(propertyName, value);
- boolValue = CSS.supports(supportCondition);
有两种不同的传值形式. 第一种用来检验浏览器对于一对 "属性 - 属性值" 的支持:
propertyName 一个包含要检查的 CSS 属性名称的 DOMString.
value 一个包含要检查的 CSS 属性值的 DOMString.
第二种语法需要一个匹配 @supports 条件的参数:
supportCondition 一个包含了检查条件的 DOMString.
来源: http://www.css88.com/qa/css3/12370.html