JS determines whether the browser supports a certain CSS3 attribute_html/css_WEB-ITnose

1. Introduction

The emergence of CSS3 has made the performance of browsers more colorful. The one with the greatest impact is animation. When writing animations on a daily basis, it is necessary to determine in advance whether the browser supports it. , especially when writing CSS3 animation libraries. For example, transition animation-play-state is only supported by some browsers.

The following method can use a script to determine whether the browser supports a certain CSS3 attribute:

Js code

1. /**
2. * Determine whether the browser supports a certain CSS3 attribute
3. * @param {String} attribute name
4. * @return {Boolean} true/false
5. * @version 1.0
6. * @author ydr.me
7. * April 4, 2014 14:47:19
8. */
10. function supportCss3(style) {
11. var prefix = ['webkit', 'Moz', 'ms', 'o'],
12. i,
13. humpString = [],
14. htmlStyle = document.documentElement.style,
15. _toHumb = function (string) {
16. return string.replace(/-(w)/g, function ($0, $1) {
17. return $1.toUpperCase();
18. });
19. };
20. for (i in prefix) humpString.push(_toHumb(prefix[i] '-' style));
21.  
22. humpString.push(_toHumb(style));
23.                                     ] in htmlStyle) return true;
24. return false;
25. Js code
27. alert(supportCss3('animation-play-state'));
4 , Reference materials
30. http://note.rpsh.net/posts/2011/05/20/css