JavaScript快速檢測瀏覽器對CSS3特性的支持情況
更新時間：2012年09月26日 19:05:01 作者：
在項目中需要快速檢測瀏覽器是否支持某CSS3特性，比如檢測是否支持“transform”，然后我的布局會有兩種完全不同的版式
在項目中需要快速檢測瀏覽器是否支持某CSS3特性，比如檢測是否支持“transform”，然后我的布局會有兩種完全不同的版式。
當(dāng)然除開本文介紹的這種快速方法，還有一種更有名和更通用的方法，那就是modernizr，運行腳本之后它會在html的class上加上瀏覽器支持的所有特性的列表。
優(yōu)點：
js是可配置的，不需要的特性檢測可以在配置腳本中去掉基于特性檢測js庫簡單好用
除此之外還有一種不太好的方法，那就是判斷瀏覽器的UA，不好的原因是UA可能會偽造，而且版本判斷繁瑣，還有不穩(wěn)定。
優(yōu)點：性能可能是最優(yōu)的
最后就是本文介紹的這個方法，我寫了一個函數(shù)快速檢測是否瀏覽器支持某CSS特性，適合的場景是快速需要知道瀏覽器是否支持某一個CSS特性（而不是好幾個）。
優(yōu)點：
性能不錯通用性強適合檢測單個CSS特性復(fù)制代碼 代碼如下:
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.創(chuàng)建一個div，然后可以獲得div.style，這是它所支持的屬性的數(shù)組列表。
2.檢查text是否包含在數(shù)組中，如果是，直接返回true。
3.檢查各種前綴，比如Webkit加上text，即webkitTransition，如果包含在style中，返回true。
4.值得注意的是在CSS中屬性名為：-webkit-transition，但是在DOM的style中 ，卻是對應(yīng)webkitTransition。我也不知道為什么會這樣。
相關(guān)文章
微信小程序?qū)崿F(xiàn)發(fā)動態(tài)功能的示例代碼
最近做了一個校園拍賣小程序，想在里面添加一個類似校園圈功能，現(xiàn)在來一步一步實現(xiàn)，對微信小程序?qū)崿F(xiàn)發(fā)動態(tài)功能感興趣的朋友一起看看吧2022-08-08
為了實現(xiàn)斷點續(xù)傳,研究了js的文件分片,下面這篇文章主要給大家介紹了關(guān)于js分片下載超出2G的大文件的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-04-04
async / await是ES7的重要特性之一，也是目前社區(qū)里公認的優(yōu)秀異步解決方案。這篇文章主要介紹了在JS循環(huán)中使用async/await的方法,需要的朋友可以參考下2018-10-10
javascript設(shè)計模式 封裝和信息隱藏（上）
今天博文關(guān)注的是javascript中的封裝，文章內(nèi)容來自《pro javascript design patterns》（有興趣的朋友可以直接去下）和自己對這一問題的理解2012-07-07
js的event詳解。...2006-09-09
CSS的確是很強大，很奇妙。很多愛好者時?？梢杂肅SS做出一些讓人意想不到的效果，比如用CSS做的燈籠、用CSS畫的房子！然而這些東西酷歸酷，說到底還只是一些不實用的東西。過濾之，過濾之……2008-11-11
為什么要做圓角的div： 圓角div平滑美觀，某些情況下有比較不錯的效果。比如說要做一個報message的消息框，那么動態(tài)的生成一個圓角div則很有意義。而對html樣式控制的css本身是不直接支持圓角div的。2009-10-10
webpack4與babel配合使es6代碼可運行于低版本瀏覽器的方法
這篇文章主要介紹了webpack4與babel配合使es6代碼可運行于低版本瀏覽器的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
JavaScript閉包原理與用法學(xué)習(xí)筆記
這篇文章主要介紹了JavaScript閉包原理與用法,結(jié)合實例形式詳細分析了JavaScript閉包相關(guān)概念、原理、用法及操作注意事項,需要的朋友可以參考下2020-05-05
這篇文章主要為大家介紹了小程序短信驗證碼頁實現(xiàn)demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11