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