Question

我正在用完整的CSS创建一个布局。但是，某些浏览器（如IE6）不支持box-shadow（..和-webkit-box-shadow或-moz-box-shadow）。我想检查它是否不受支持，然后添加其他样式。

jQuery中如何实现这一点？

Martti Laine

Answer 1

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

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

这是自己动手的方式。其他可靠的方法是modernizr库，它可以为您进行特征检测。

http://www.modernizr.com/

这里根本不需要jQuery。

Answer 2

Quick Tip: Detect CSS3 Support in Browsers with JavaScript中描述了一个用于检查浏览器支持哪些CSS功能的简洁功能（纯JavaScript，无jQuery）。

功能如下：

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;
   };
})();

用法是这样的：

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

它对我来说就像一个魅力！： - ）

如何检查是否支持css box-shadow（jQuery）？

2 个答案: