浏览器对HTML5特性检測工具Modernizr
近期在做公司移動(dòng)端運(yùn)營的項(xiàng)目，需求中多處地方都會(huì)涉及動(dòng)畫。
相信非常多前端開發(fā)都會(huì)有這樣的感觸，對(duì)CSS3中的動(dòng)畫屬性非常熟悉，可是因?yàn)閷?duì)動(dòng)畫運(yùn)動(dòng)過程的理解不深入，經(jīng)常僅僅能望而止步。CSS3中動(dòng)畫這在Web頁面中具有點(diǎn)睛之筆，讓人眼前一亮。這段時(shí)間我會(huì)抽出時(shí)間來整理關(guān)于動(dòng)畫這塊的知識(shí)點(diǎn)。希望能在總結(jié)的同一時(shí)候分享給有須要的朋友們。假設(shè)有什么好的建議和想法歡迎相互交流學(xué)習(xí)。不管是動(dòng)畫還是別的CSS3的新特性在移動(dòng)端都能得到非常好的支持。可是對(duì)于PC端來說，有那么些不太友好的瀏覽器（比方萬惡的IE9-）無法支持CSS3特性，為了能夠更好的使用CSS3特性來實(shí)現(xiàn)更絢麗的頁面效果，今天先介紹下瀏覽器的檢測(cè)工具M(jìn)odernizr。
瀏覽器的支持情況 和 裝機(jī)情況（分享兩個(gè)站點(diǎn)）
這邊分享兩個(gè)前端經(jīng)常使用的檢測(cè)站點(diǎn)，一個(gè)是檢測(cè)瀏覽器的兼容性站點(diǎn)，對(duì)于HTML5和CSS3功能支持。并不是取決于我們。終于的決定權(quán)由瀏覽器的開發(fā)商說了算，所以了解每一個(gè)瀏覽器對(duì)屬性和標(biāo)簽的支持情況顯得非常重要。另外一個(gè)是檢測(cè)各種瀏覽器的裝機(jī)情況，這個(gè)站點(diǎn)能夠告訴我們有多少用戶的瀏覽器支持我們想使用的功能。
瀏覽器兼容性站點(diǎn)：Can I use (點(diǎn)擊我試試) http://caniuse.com/
瀏覽器裝機(jī)情況統(tǒng)計(jì)站點(diǎn)：http://gs.statcounter.com/
Modernizr
檢測(cè)功能是應(yīng)對(duì)瀏覽器支持差異的一個(gè)重要策略，假設(shè)我們自己去編寫一個(gè)檢測(cè)HTML5新特性支持情況須要花費(fèi)大量的時(shí)間，但假設(shè)不去檢測(cè)又怕不同瀏覽器對(duì)特性的支持存在差異，面對(duì)這個(gè)難題，我們能夠使用前人寫好的檢測(cè)工具M(jìn)odernizr。Modernizr是怎樣的一個(gè)工具。它是一個(gè)小巧、持續(xù)更新、專門用于測(cè)試瀏覽器對(duì)非常多HTML5及相關(guān)功能的支持情況。
Modernizr下載地址：https://modernizr.com/
怎樣選擇Modernizr
因?yàn)镸odernizr工具被不斷的完整，所以它的JS庫也變得越來越大。我們須要的是有目的性的選擇須要檢測(cè)的特性，去Modernizr的站點(diǎn)點(diǎn)擊 Add your detects button進(jìn)入頁面選擇所須要檢測(cè)的屬性，再下載。
比如：我僅僅想使用canvas標(biāo)簽，可是又不清楚各大瀏覽器對(duì)它的支持情況，那么我僅僅須要在Modernizr中選擇檢測(cè)canvas屬性打包下載就可以。
怎樣使用Modernizr
Modernizr的用法非常easy，僅僅要直接在head區(qū)域引入就可以。
<head>
<meta charset="UTF-8">
<title>HTML5特性檢測(cè)</title>
<script src="modernizr-custom.js"></script>
</head>怎樣查看檢測(cè)結(jié)果
我這邊以完整的Modernizr檢測(cè)工具為例。介紹怎樣查看各大特性的兼容性支持情況。
查看特性的兼容性，我們僅僅須要到對(duì)應(yīng)的瀏覽器中。打開開發(fā)人員模式，查看html標(biāo)簽 后面會(huì)加入一個(gè)class樣式表。這個(gè)樣式表就是對(duì)各個(gè)特性支持情況的統(tǒng)計(jì)。
特性僅僅有兩個(gè)值：帶前綴no的為不支持即false，不帶前綴的為支持true。
比如：
no-canvas表示瀏覽器不支持該特性
canvas表示瀏覽器支持該特性
chrome瀏覽器：
IE8瀏覽器：
怎樣使用Modernizr所檢測(cè)的class
使用Modernizr檢測(cè)了瀏覽器對(duì)所需HTML特性的支持情況后。我們須要的是使用它，事實(shí)上我們自身應(yīng)該非常清楚，為什么須要檢測(cè)瀏覽器對(duì)特性的支持情況？非常多瀏覽器對(duì)于CSS3的特性不支持，假設(shè)我們?cè)诰W(wǎng)頁表現(xiàn)上大量的使用這些新特性，那么可能會(huì)造成不支持該特性的瀏覽器對(duì)網(wǎng)頁解析產(chǎn)生錯(cuò)誤。從而導(dǎo)致頁面布局、功能遭到破壞。而使用Modernizr檢測(cè)出來瀏覽器對(duì)特性的支持情況，就能非常好的把控整個(gè)頁面。
比如：在支持的瀏覽器中，你想要圓角邊框。而在不支持的瀏覽器中。你想使用雙線邊框。那么此時(shí)在你使用了Modernizr腳步的頁面，能夠這樣編寫。
HTML：
<div class="header">button</div>.header{
width: 80px;
background-color: #ccc;
padding: 10px;
margin: 10px;
text-align: center;
}
.borderradius .header{
border: thin #2DCB70 solid ;
border-radius: 20px;
}
.no-borderradius .header{
border: 5px #2DCB70 double;
}支持border-radius的瀏覽器：
不支持border-radius的瀏覽器：
總結(jié)：今天分享和總結(jié)Modernizr檢測(cè)瀏覽對(duì)HTML特性的支持情況，是為了更好的使用HTML5新特性，在支持新特性的瀏覽器中使用前沿的技術(shù)，在不支持的瀏覽器中使用成熟的技術(shù)。這樣能夠更好的實(shí)現(xiàn)網(wǎng)頁的兼容性而且網(wǎng)頁在不同瀏覽器中呈現(xiàn)的視覺效果不會(huì)相差太大。使它平滑的過渡。
總結(jié)
以上是生活随笔為你收集整理的浏览器对HTML5特性检測工具Modernizr的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关于C++拷贝控制
- 下一篇： AI人工智能 机器学习 深度学习 学习路