Advanced Search

Test CSS3 Support with JS

/ Published in: JavaScript
Save to your folder(s)
This function will test whether or not the browser supports a specified CSS3 property, like "border-radius."

Note that, when passing the property, omit the dash. So, instead of "border-radius," pass "borderRadius" (or "BorderRadius").

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. var supports = (function() {
  2.    var div = document.createElement('div'),
  3.       vendors = 'Khtml Ms O Moz Webkit'.split(' '),
  4.       len = vendors.length;
  5.  
  6.    return function(prop) {
  7.       if ( prop in div.style ) return true;
  8.  
  9.       prop = prop.replace(/^[a-z]/, function(val) {
  10.          return val.toUpperCase();
  11.       });
  12.  
  13.       while(len--) {
  14.          if ( vendors[len] + prop in div.style ) {
  15.             // browser supports box-shadow. Do what you need.
  16.             // Or use a bang (!) to test if the browser doesn't.
  17.             return true;
  18.          } 
  19.       }
  20.       return false;
  21.    };
  22. })();
  23.  
  24. if ( supports('textShadow') ) {
  25.    document.documentElement.className += ' textShadow';
  26. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.