1. Introduction
The emergence of css3 makes the browser's performance more colorful, and the biggest impact on the performance is animation. When writing animations in daily life, it is necessary to judge whether the browser supports it in advance, especially when writing CSS3 animation library. For example, the animation-play-state of transition is supported by only some browsers.
2. Testing method
The following method can use scripts to determine whether the browser supports a certain CSS3 attribute:
/** * Determine whether the browser supports a certain CSS3 attribute* @param {String} Property name* @return {Boolean} true/false * @version 1.0 * @author ydr.me * April 4, 2014 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; }3. How to use
alert(supportCss3('animation-play-state'));