瀏覽器對HTML5特性檢測工具Modernizr

時間 2019-11-13

標籤瀏覽器 html5 html 特性工具 modernizr 欄目瀏覽器简体版

原文原文鏈接

近期在作公司移動端運營的項目，需求中多處地方都會涉及動畫。javascript

相信很是多前端開發都會有這樣的感觸，對CSS3中的動畫屬性很是熟悉，但是由於對動畫運動過程的理解不深刻，常常僅僅能望而止步。CSS3中動畫這在Web頁面中具備點睛之筆，讓人眼前一亮。這段時間我會抽出時間來整理關於動畫這塊的知識點。但願能在總結的同一時候分享給有需要的朋友們。假設有什麼好的建議和想法歡迎相互交流學習。無論是動畫仍是別的CSS3的新特性在移動端都能獲得很是好的支持。但是對於PC端來講，有那麼些不太友好的瀏覽器（比方萬惡的IE9-）沒法支持CSS3特性，爲了可以更好的使用CSS3特性來實現更絢麗的頁面效果，今天先介紹下瀏覽器的檢測工具Modernizr。css

瀏覽器的支持狀況和裝機狀況（分享兩個站點）html

這邊分享兩個前端常常使用的檢測站點，一個是檢測瀏覽器的兼容性站點，對於HTML5和CSS3功能支持。並非取決於咱們。終於的決定權由瀏覽器的開發商說了算，因此瞭解每個瀏覽器對屬性和標籤的支持狀況顯得很是重要。另一個是檢測各類瀏覽器的裝機狀況，這個站點可以告訴咱們有多少用戶的瀏覽器支持咱們想使用的功能。前端

瀏覽器兼容性站點：Can I use (點擊我試試) http://caniuse.com/java

瀏覽器裝機狀況統計站點：http://gs.statcounter.com/chrome

Modernizrcanvas

檢測功能是應對瀏覽器支持差別的一個重要策略，假設咱們本身去編寫一個檢測HTML5新特性支持狀況需要花費大量的時間，但假設不去檢測又怕不一樣瀏覽器對特性的支持存在差別，面對這個難題，咱們可以使用前人寫好的檢測工具Modernizr。Modernizr是怎樣的一個工具。它是一個小巧、持續更新、專門用於測試瀏覽器對很是多HTML5及相關功能的支持狀況。瀏覽器

Modernizr下載地址：https://modernizr.com/markdown

怎樣選擇Modernizrapp

由於Modernizr工具被不斷的完整，因此它的JS庫也變得愈來愈大。咱們需要的是有目的性的選擇需要檢測的特性，去Modernizr的站點點擊 Add your detects button進入頁面選擇所需要檢測的屬性，再下載。

好比：我僅僅想使用canvas標籤，但是又不清楚各大瀏覽器對它的支持狀況，那麼我僅僅需要在Modernizr中選擇檢測canvas屬性打包下載就能夠。

怎樣使用Modernizr

Modernizr的用法很是easy，僅僅要直接在head區域引入就能夠。

<head>
    <meta charset="UTF-8">
    <title>HTML5特性檢測</title>
    <script src="modernizr-custom.js"></script>
</head>

怎樣查看檢測結果

我這邊以完整的Modernizr檢測工具爲例。介紹怎樣查看各大特性的兼容性支持狀況。

查看特性的兼容性，咱們僅僅需要到對應的瀏覽器中。打開開發人員模式，查看html標籤後面會加入一個class樣式表。這個樣式表就是對各個特性支持狀況的統計。

特性僅僅有兩個值：帶前綴no的爲不支持即false，不帶前綴的爲支持true。

好比：

no-canvas表示瀏覽器不支持該特性

canvas表示瀏覽器支持該特性

chrome瀏覽器：

IE8瀏覽器：

怎樣使用Modernizr所檢測的class

使用Modernizr檢測了瀏覽器對所需HTML特性的支持狀況後。咱們需要的是使用它，事實上咱們自身應該很是清楚，爲何需要檢測瀏覽器對特性的支持狀況？很是多瀏覽器對於CSS3的特性不支持，假設咱們在網頁表現上大量的使用這些新特性，那麼可能會形成不支持該特性的瀏覽器對網頁解析產生錯誤。從而致使頁面佈局、功能遭到破壞。而使用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; }