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

admin管理员组

文章数量:1352863

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

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

• javascript
• jquery
• css

Share Improve this question Follow edited Aug 19, 2010 at 17:45 jAndy 236k5757 gold badges313313 silver badges363363 bronze badges asked Aug 19, 2010 at 17:38 Martti LaineMartti Laine 13k2222 gold badges7070 silver badges103103 bronze badges 1

• 3 Duplicate? stackoverflow./questions/1342994/… – user113716 Commented Aug 19, 2010 at 17:41

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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./

No jQuery needed at all here.

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! :-)

本文标签： javascriptHow to check if css boxshadow is supported (jQuery)Stack Overflow