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

Question

我在完整的css中創建了一個佈局。但是，某些瀏覽器（如IE6）不支持box-shadow（..和-webkit-box-shadow或-moz-box-shadow）。我想檢查它是否不受支持，然後添加其他樣式。

這在jQuery中可能如何？

馬爾蒂·萊恩

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 
} 

它的工作就像一個魅力對我來說！ :-)