css3的出现让浏览器的表现更加的丰富多彩，表现冲击最大的就是动画了，在日常书写动画的时候，很有必要去事先判断浏览器是否支持，尤其是在写CSS3动画库的时候。

判断浏览器是否支持css3的方法：

一、下面的方法可以使用js脚本判断浏览器是否支持某一个CSS3属性：

/** 
* 判断浏览器是否支持某一个CSS3属性 
* @param {String} 属性名称 
* @return {Boolean} true/false 
* @version 1.0 
* @author ydr.me 
* 2014年4月4日14:47:19 
*/
 
function supportCss3(style) { 
var prefix = ['webkit', 'Moz', 'ms', 'o'], 
i, 
humpString = [], 
htmlStyle = document.documentElement.style, 
_toHumb = function (string) { 
return string.replace(/-(\w)/g, function ($0, $1) { 
return $1.toUpperCase(); 
}); 
}; 
 
for (i in prefix) 
humpString.push(_toHumb(prefix[i] + '-' + style)); 
 
humpString.push(_toHumb(style)); 
 
for (i in humpString) 
if (humpString[i] in htmlStyle) return true; 
 
return false; 
}

使用方法

alert(supportCss3('animation-play-state'));

二、在css中支持@supports标记、或者在js中使用CSS.supports函数，来检测浏览器是否支持css3的新属性

CSS @supports标记：

语法：

@supports (rule)[operator (rule)]* { sRules }

说明：

rule： 指定一条具体的CSS规则，必须使用括号包裹。
operator： 使用or | and | not等操作符指定多条规则。

1、基本用法：

@supports ( display: flex ) {	body {		display: flex;
	}	#main {		flex: auto;
	}
}

代表浏览器支持flex标准，则使用里面的规则，如果不支持，可以如下实现。

2、not关键词 ：

@supports not ( display: flex ) {	
#main{	    float: left;	
	}
}

Js中CSS.supports函数

同css的@supports标记一样，js里也提供了Window.CSS.supports()方法，用来检查浏览器对css3属性是否支持，该函数提供2中调用方式：

第一种方法是使用两个参数：一个是属性名，另一个是属性值 。

var supportsFlex = CSS.supports("display", "flex");

第二种用法是：简单的提供整个需要分析的样式字串。

var supportsFlex = CSS.supports("(display: flex) and (-webkit-display: flex)");

CSS.supports函数返回的是一个布尔值，如果为true这代表支持该属性，当然在使用该函数之前，我们需要先判断浏览器是否支持CSS.supports，方法如下：

if(!!((window.CSS && window.CSS.supports) || window.supportsCSS || false)){   
 //支持
}

链接: https://www.fly63.com/article/detial/8684