记录一下。
CSS:-moz- -o- -ms- -webkit-
JS:Moz O ms Webkit
e.g.
MozAnimationName -moz-animation-name
OAnimationName -o-animation-name
msAnimationName -ms-animation-name
WebkitAnimationName -webkit-animation-name
从Modernizr这个库的源码中看到他检查浏览器的前缀就是这么用的。
/** * 检查是否支持CSS3动画 */ prototype.isSupportAnimation = function () { if (this._isSupportAnimation != null) { return this._isSupportAnimation; } var fn = function () { // 检查是否支持CSS3动画 var cssProps = 'animation-name -webkit-animation-name -moz-animation-name -ms-animation-name -o-animation-name'.split(' '), jsProps = 'animationName WebkitAnimationName MozAnimationName msAnimationName OAnimationName'.split(' '), style = doc.createElement('div').style, i; // 1.先用原生的方法检查是否支持 if ('CSS' in win && 'supports' in win.CSS) { for (i = 0; i < cssProps.length; i++) { if (win.CSS.supports(cssProps[i], 'a')) { return true; } } } // 2.再手动检测 for (i = 0; i < jsProps.length; i++) { if (style[jsProps[i]] !== undefined) { return true; } } return false; }; return this._isSupportAnimation = fn(); };
浏览器前缀检测css-vendor