JavaScript快速偵測瀏覽器對CSS3特性的支援情況_javascript技巧

在專案中需要快速偵測瀏覽器是否支援某CSS3特性，例如偵測是否支援“transform”，然後我的版面會有兩種完全不同的版式。

當然除開本文介紹的這種快速方法，還有一種更有名和更通用的方法，那就是modernizr，運行腳本之後它會在html的class上加上瀏覽器支持的所有特性的列表。

優點：

js是可設定的，不需要的特性偵測可以在設定腳本中去掉基於特性偵測js函式庫簡單好用

除此之外還有一種不太好的方法，那就是判斷瀏覽器的UA，不好的原因是UA可能會偽造，而且版本判斷繁瑣，還有不穩定。

優點：效能可能是最優的

最後就是本文介紹的這個方法，我寫了一個函數快速偵測是否瀏覽器支援某CSS特性，適合的場景是快速需要知道瀏覽器是否支援某一個CSS特性（而不是好幾個）。

優點：

性能不錯通用性強適合檢測單個CSS特性

複製代碼程式碼如下:

var supports = (function() {
var div = document.createElement('div'),
vendors = 'Khtml O Moz Webkit'.split(' '),
len = vendors.length;
return function(prop) {
if ( prop in div.style ) return true;
if ('-ms-' 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 ) {
return true;
}
}
return false;
};
})();
if ( supports('textShadow') ) {
document.documentElement.className = ' textShadow';
}

這就是最終程式碼，原理是：

1.建立一個div，然後可以取得div.style，這是它所支援的屬性的陣列列表。

2.檢查text是否包含在陣列中，如果是，直接傳回true。

3.檢查各種前綴，例如Webkit加上text，即webkitTransition，若包含在style中，則回傳true。

4.值得注意的是在CSS中屬性名稱為：-webkit-transition，但是在DOM的style中 ，卻是對應webkitTransition。我也不知道為什麼會這樣。

參考資料：http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-detect-css-support-in-browsers-with-javascript/