Posted By

Nettuts on 11/14/10


Tagged


Versions (?)

Who likes this?

16 people have marked this snippet as a favorite

Abderrahmane_TJ
baires
donnykurnia
tomasdev
pmigueld
mplabs
atma
spaceploitator
f1r3fl3x
terrencewood
johndonahue
sethetter
qubestream
wirenaught
shodan_uk
adambundy


Test CSS3 Support with JS


 / Published in: JavaScript
 

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").

  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
Posted By: Nettuts on November 14, 2010

Hey guys - feel free to offer any improvements. It's just a simple function, but let me know if you notice anything odd! -Jeffrey

Posted By: drwb333 on July 9, 2013

I was trying to use this to determine whether to use CSS3 transitions or jQuery animate(). It seemed to work fine in IE 10, Chrome, and Firefox, but it crashed when I tried it in IE 9 and IE 8. I simply did a copy and paste of your code, then added

if (supports('transition')) { alert("Your browser supports CSS3 Transitions"); } else if (!supports('transition')) { alert("Your browser DOES NOT support CSS Transitions"); }

You need to login to post a comment.