JavaScript快速檢測(cè)瀏覽器對(duì)CSS3特性的支持情況
在項(xiàng)目中需要快速檢測(cè)瀏覽器是否支持某CSS3特性，比如檢測(cè)是否支持“transform”，然后我的布局會(huì)有兩種完全不同的版式。
當(dāng)然除開(kāi)本文介紹的這種快速方法，還有一種更有名和更通用的方法，那就是modernizr，運(yùn)行腳本之后它會(huì)在html的class上加上瀏覽器支持的所有特性的列表。
優(yōu)點(diǎn)：
js是可配置的，不需要的特性檢測(cè)可以在配置腳本中去掉基于特性檢測(cè)js庫(kù)簡(jiǎn)單好用
除此之外還有一種不太好的方法，那就是判斷瀏覽器的UA，不好的原因是UA可能會(huì)偽造，而且版本判斷繁瑣，還有不穩(wěn)定。
優(yōu)點(diǎn)：性能可能是最優(yōu)的
最后就是本文介紹的這個(gè)方法，我寫(xiě)了一個(gè)函數(shù)快速檢測(cè)是否瀏覽器支持某CSS特性，適合的場(chǎng)景是快速需要知道瀏覽器是否支持某一個(gè)CSS特性（而不是好幾個(gè)）。
優(yōu)點(diǎn)：
性能不錯(cuò)通用性強(qiáng)適合檢測(cè)單個(gè)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.創(chuàng)建一個(gè)div，然后可以獲得div.style，這是它所支持的屬性的數(shù)組列表。
2.檢查text是否包含在數(shù)組中，如果是，直接返回true。
3.檢查各種前綴，比如Webkit加上text，即webkitTransition，如果包含在style中，返回true。
4.值得注意的是在CSS中屬性名為：-webkit-transition，但是在DOM的style中 ，卻是對(duì)應(yīng)webkitTransition。我也不知道為什么會(huì)這樣。
相關(guān)文章
這幾天不是很忙，就找了些拖動(dòng)布局方面的資料看看，也學(xué)著寫(xiě)了個(gè)拖動(dòng)布局的效果，沒(méi)想到花了好多時(shí)間，七拼八湊，總算是把這個(gè)效果寫(xiě)出來(lái)了。2010-10-10
javascript 中關(guān)于array的常用方法詳解
這篇文章主要介紹了javascript 中關(guān)于array的常用方法的相關(guān)資料,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了編程語(yǔ)言JavaScript簡(jiǎn)介,本文講解了JavaScript是什么、JavaScript特點(diǎn)、JavaScript和Java的區(qū)別等內(nèi)容,需要的朋友可以參考下2014-10-10
這篇文章主要給大家介紹了關(guān)于js兩個(gè)數(shù)組合并去重的相關(guān)資料,日常開(kāi)發(fā)中經(jīng)常會(huì)用到的JS數(shù)組去重,文中將每種方法都給出了代碼示例,需要的朋友可以參考下2023-09-09
JavaScript 保護(hù)變量不被隨意修改的實(shí)現(xiàn)代碼
本文通過(guò)實(shí)例代碼給大家分享JavaScript 保護(hù)變量不被隨意修改的實(shí)現(xiàn)方法，需要的朋友參考下吧2017-09-09
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)自定義右鍵菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要介紹了小程序清理本地緩存的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
webpack5的loader配置小白學(xué)習(xí)篇
這篇文章主要為大家介紹了webpack5的loader配置非常適合webpack入門(mén)的小白學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
原生JavaScript實(shí)現(xiàn)Ajax異步請(qǐng)求
ajax現(xiàn)在是一種非常流行的技術(shù)，現(xiàn)在雖然可以利用JQuery或者一些第三方插件甚至微軟提供的一些控件可以方面的實(shí)現(xiàn)ajax功能，但是明白其原理也是非常重要的，下面是來(lái)使用純javascript實(shí)現(xiàn)獲取服務(wù)器端的功能來(lái)展示如何使用純javascript實(shí)現(xiàn)ajax功能，以弄清其原理.2017-11-11
JavaScript事件 "事件對(duì)象"的注意要點(diǎn)
這篇文章主要介紹了JavaScript事件,告訴大家"事件對(duì)象"的注意要點(diǎn)，感興趣的小伙伴們可以參考一下2016-01-01