JS determines whether the browser supports a certain CSS3 attribute method, jscss3

JS determines whether the browser supports a certain CSS3 attribute method, jscss3

1. Introduction

The emergence of css3 makes the browser's performance more colorful, and the biggest impact of performance is animation. During daily animation writing, it is necessary to determine whether the browser supports it in advance, especially when writing a CSS3 animation library. For example, the animation-play-state of transition is only supported by some browsers.

2. Detection Method

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

/*** Determine whether the browser supports a certain CSS3 attribute * @ param {String} attribute 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.doc umentElement. 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. Usage

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

Check whether the browser supports CSS3.

(3) Please refer to the following example: I advise you to use HTML, CSS and JavaScript. The following are the steps. 1) first create the following HTML <spanid = "check" rel = "Detect"> </span> 2) then write the following CSS # check {display: none; width: 0; height: 0; }# check [rel ^ = "D"] {display: block; width: 0; height: 0;} 3) the following is the JavaScripts detection script. Make sure that the following code is placed in the HTML file header. <Scripttype = "text/javascript"> varobj = document. getElementById ("check"); varfile = "special.css"; if (window. getComputedStyle) varstat = window. getComputedStyle (obj, null ). getPropertyValue ("display"); elseif (obj. currentStyle) varstat = obj. currentStyle. display; varcss3 = (stat = "block"); if (css3) alert ("CSS3Supported. "); elsealert (" CSS3notsupported. "); </script> I want to contribute div + css Volunteer: Jiang Xiaofei's comments are incorrect. [copyright description] the copyright to" computer "belongs to the author. You You can refer to your computer information for personal learning. All the Computer Information of kullie network is collected online for hobbies and uploaded by members, so that effective resources can be shared to users in a timely manner, however, due to the complexity of information sources, this site does not guarantee its accuracy and is only for reference. Teaching and personal learning and communication! It is strictly prohibited for any commercial purposes. This site is not responsible for your use! If your rights are violated, please let us know and we will delete it immediately after verification! Thank you.

Check whether the user's browser supports CSS3

Ghjkl; cvbnm, fghj rice cooker