How to check if css box-shadow is supported (jQuery)?

Question

I'm creating a layout in full css. However, some browser (such as IE6) do not support box-shadow (.. and -webkit-box-shadow or -moz-box-shadow). I would like to check if it's not supported and then add other styles.

How's this possible in jQuery?

Martti Laine

Duplicate? http://stackoverflow.com/questions/1342994/check-browser-css-property-support — user113716, Aug 19 '10 at 17:41

jAndy · Accepted Answer · 2010-08-19T17:49:04.020

9

var check = document.createElement('div');

var shadow = !!(0 + check.style['MozBoxShadow']);
if(shadow)
   alert('moz-box-shadow available');

That is the doing-it-yourself way. Other reliable way is the modernizr library, which does feature detection for you.

http://www.modernizr.com/

No jQuery needed at all here.

edited Aug 19 '10 at 17:49

answered Aug 19 '10 at 17:42

jAndy

231,737
57
305
359

3

@Stefan: So what exactly is the -1 for? :p – jAndy Aug 19 '10 at 18:15
1

Not sure what issue @Stefan has with the DIY. The same check would probably be done for the `WebkitBoxShadow` and `boxShadow`, but it's not much of a stretch to figure that out. – user113716 Aug 19 '10 at 18:32
It's like writing your own GCD function, when one exists. In case the check for boxshadow changes in the future, Modernizr could be updated to support this change. Any code you write yourself that exists in a library is bad code. – Stefan Kendall Aug 19 '10 at 18:52
9

@Stefan: are you serious ? You'd suggest someone, who just needs to make one or two feature detections (which is about 30 bytes?) to use a lib that takes like 2k, 3k, 10k whatever? Don't get me wrong, I like modernizr, but for just one check is overkill. It's like using jQuery to select an element. – jAndy Aug 19 '10 at 19:22
1

Yes, jQuery SHOULD be used to select elements. It's a one-time static hit, and if you point to a proper CDN you're likely to get a cache hit. Modern libraries are incredibly small when compressed, and this is an egregious copying of code. 5KB is NOT a significant amount of space. You're arguing to not use libraries, due to the potential "bloat". Copying code has a far more terrible impact on code longevity. – Stefan Kendall Aug 19 '10 at 22:00
@Stefan: I guess we are looking at things differently, so whatever. – jAndy Aug 20 '10 at 05:15

score 3 · Answer 2 · answered Apr 11 '13 at 15:31

A neat function (pure JavaScript, no jQuery) to check which CSS features are supported by the browser is described in Quick Tip: Detect CSS3 Support in Browsers with JavaScript.

Function is as follows:

var supports = (function() {
   var div = document.createElement('div'),
      vendors = 'Khtml Ms O Moz Webkit'.split(' '),
      len = vendors.length;

   return function(prop) {
      if (prop in div.style) {
          return true;
      }

      prop = prop.replace(/^[a-z]/, function(val) {
         return val.toUpperCase();
      });

      while (len--) {
         if (vendors[len] + prop in div.style) {
            // browser supports box-shadow. Do what you need.
            // Or use a bang (!) to test if the browser doesn't.
            return true;
         } 
      }

      return false;
   };
})();

Usage is like this:

if (supports('boxShadow')) { 
   // Do whatever
}

It worked like a charm for me! :-)

How to check if css box-shadow is supported (jQuery)?

2 Answers2

Linked