做爲html5開發人員經常面臨兼容性和新功能之間的抉擇,爲了解決這一問題,咱們會採起不一樣的方案,按照問題解決的遞進關係能夠分爲3步(避免問題和解決問題):1,瞭解主流瀏覽器對於制定html5功能的支持狀況,若是可以獲得指望的瀏覽器的支持,那麼可使用,不然不實用。在瞭解瀏覽器的支持狀況後,還須要瀏覽器的裝機狀況,這樣能夠進一步瞭解目標用戶對於新功能是否有足夠的支持;2,針對一臺具體的用戶電腦瀏覽器查詢特定的功能時候可以被支持(所謂診斷),可使用modernizr技術來解決;3mo d針對診斷結果採起解決方案,可使用膩子腳原本解決(所謂醫治)。html
1,瞭解瀏覽器的支持狀況和瀏覽器在用戶中的使用狀況html5
能夠經過專門的統計網站caniuse來了解這些狀況,
簡單說明一下它的使用。上圖(caniuse首頁截圖)是網站內容,在綠框中輸入你所須要的html5新功能名字,便可查詢對應的使用狀況。chrome
caniuse查詢結果
在查詢結果中能夠看到各個主流瀏覽器的不一樣版本對於這個功能支持狀況。值得注意的是國內一些瀏覽器大可能是盒子瀏覽器,採用別人的瀏覽器內核。如QQ瀏覽器採用的IE內核(支持狀況取決於你電腦上安裝的IE版本),360瀏覽器採用的是chrome+IE瀏覽器雙核,百度瀏覽器一樣是雙核。具體版本能夠經過到官網上進行查詢。這些瀏覽器會基於內核進行優化,因此不能簡單根據內核版本判斷支持狀況,但內核版本能夠做爲充要條件。瀏覽器
2,經過modernizr進行瀏覽器功能檢測函數
經過modernizr能夠判斷某一功能是否可以被當前瀏覽器支持,modernizr是一個能夠插入到你的網頁裏面的js文件,經過調用內部的函數能夠完成對當前瀏覽器的某一功能的檢驗。使用方法以下:優化
1,下載modernizr的js文件。2,將文件放入到你的網頁所在的文件夾內。3,在你的網頁的head標籤中加入對這個js文件的使用。4,編寫腳本執行檢測功能,並將結果輸出到頁面中去。網站
3,經過膩子腳原本解決兼容性的問題。spa
咱們已經能夠經過modernizr來判斷某一功能可否被當前瀏覽器所支持。可是這一結果不能幫助瀏覽器進行正確的現實爲了解決這一問題,咱們能夠經過膩子腳本的方式來解決。針對不一樣html功能會有膩子腳原本解決,然而膩子腳本的的品質確不一能保證。這是膩子腳本的集合htm