作為html5開發(fā)人員常常面臨兼容性和新功能之間的抉擇襟铭,為了解決這一問題,我們會采取不同的方案锣笨,按照問題解決的遞進關系可以分為3步(避免問題和解決問題):1蝌矛,了解主流瀏覽器對于制定html5功能的支持情況,如果能夠得到期望的瀏覽器的支持错英,那么可以使用,否則不實用隆豹。在了解瀏覽器的支持情況后椭岩,還需要瀏覽器的裝機情況,這樣可以進一步了解目標用戶對于新功能是否有足夠的支持璃赡;2判哥,針對一臺具體的用戶電腦瀏覽器查詢特定的功能時候能夠被支持(所謂診斷),可以使用modernizr技術來解決碉考;3mo d針對診斷結果采取解決方案塌计,可以使用膩子腳本來解決(所謂醫(yī)治)。
1侯谁,了解瀏覽器的支持情況和瀏覽器在用戶中的使用情況
可以通過專門的統(tǒng)計網站caniuse來了解這些情況锌仅,
簡單說明一下它的使用。上圖(caniuse首頁截圖)是網站內容墙贱,在綠框中輸入你所需要的html5新功能名字热芹,即可查詢對應的使用情況。
在查詢結果中可以看到各個主流瀏覽器的不同版本對于這個功能支持情況惨撇。值得注意的是國內一些瀏覽器大多是盒子瀏覽器伊脓,采用別人的瀏覽器內核。如QQ瀏覽器采用的IE內核(支持情況取決于你電腦上安裝的IE版本)魁衙,360瀏覽器采用的是chrome+IE瀏覽器雙核报腔,百度瀏覽器同樣是雙核株搔。具體版本可以通過到官網上進行查詢。這些瀏覽器會基于內核進行優(yōu)化纯蛾,所以不能簡單根據(jù)內核版本判斷支持情況邪狞,但內核版本可以作為充要條件。
2茅撞,通過modernizr進行瀏覽器功能檢測
通過modernizr可以判斷某一功能是否能夠被當前瀏覽器支持帆卓,modernizr是一個可以插入到你的網頁里面的js文件,通過調用內部的函數(shù)可以完成對當前瀏覽器的某一功能的檢驗米丘。使用方法如下:
1剑令,下載modernizr的js文件。2拄查,將文件放入到你的網頁所在的文件夾內吁津。3,在你的網頁的head標簽中加入對這個js文件的使用堕扶。4碍脏,編寫腳本執(zhí)行檢測功能,并將結果輸出到頁面中去稍算。
3典尾,通過膩子腳本來解決兼容性的問題。
我們已經可以通過modernizr來判斷某一功能能否被當前瀏覽器所支持糊探。但是這一結果不能幫助瀏覽器進行正確的現(xiàn)實為了解決這一問題钾埂,我們可以通過膩子腳本的方式來解決。針對不同html功能會有膩子腳本來解決科平,然而膩子腳本的的品質確不一能保證褥紫。這是膩子腳本的集合