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è)方法，我寫了一個(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)文章
微信小程序?qū)崿F(xiàn)發(fā)動(dòng)態(tài)功能的示例代碼
最近做了一個(gè)校園拍賣小程序，想在里面添加一個(gè)類似校園圈功能，現(xiàn)在來(lái)一步一步實(shí)現(xiàn)，對(duì)微信小程序?qū)崿F(xiàn)發(fā)動(dòng)態(tài)功能感興趣的朋友一起看看吧2022-08-08
為了實(shí)現(xiàn)斷點(diǎn)續(xù)傳,研究了js的文件分片,下面這篇文章主要給大家介紹了關(guān)于js分片下載超出2G的大文件的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
async / await是ES7的重要特性之一，也是目前社區(qū)里公認(rèn)的優(yōu)秀異步解決方案。這篇文章主要介紹了在JS循環(huán)中使用async/await的方法,需要的朋友可以參考下2018-10-10
javascript設(shè)計(jì)模式 封裝和信息隱藏（上）
今天博文關(guān)注的是javascript中的封裝，文章內(nèi)容來(lái)自《pro javascript design patterns》（有興趣的朋友可以直接去下）和自己對(duì)這一問(wèn)題的理解2012-07-07
js的event詳解。...2006-09-09
CSS的確是很強(qiáng)大，很奇妙。很多愛(ài)好者時(shí)?？梢杂肅SS做出一些讓人意想不到的效果，比如用CSS做的燈籠、用CSS畫的房子！然而這些東西酷歸酷，說(shuō)到底還只是一些不實(shí)用的東西。過(guò)濾之，過(guò)濾之……2008-11-11
Javascript 圓角div的實(shí)現(xiàn)代碼
為什么要做圓角的div： 圓角div平滑美觀，某些情況下有比較不錯(cuò)的效果。比如說(shuō)要做一個(gè)報(bào)message的消息框，那么動(dòng)態(tài)的生成一個(gè)圓角div則很有意義。而對(duì)html樣式控制的css本身是不直接支持圓角div的。2009-10-10
webpack4與babel配合使es6代碼可運(yùn)行于低版本瀏覽器的方法
這篇文章主要介紹了webpack4與babel配合使es6代碼可運(yùn)行于低版本瀏覽器的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
JavaScript閉包原理與用法學(xué)習(xí)筆記
這篇文章主要介紹了JavaScript閉包原理與用法,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript閉包相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-05-05
小程序短信驗(yàn)證碼頁(yè)面實(shí)現(xiàn)demo
這篇文章主要為大家介紹了小程序短信驗(yàn)證碼頁(yè)實(shí)現(xiàn)demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11