在項目中需要快速檢測瀏覽器是否支援某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/