五步輕鬆實現對現代瀏覽器的兼容

時間 2019-11-17

原文原文鏈接

　　做爲Web攻城師，最頭疼的問題莫過於瀏覽器兼容性測試，各類類型瀏覽器，各類版本的瀏覽器，還有各類頭疼的前綴等等。dev.modern.IE是微軟推出的用來幫助開發者建立現代網站的基本開發工具，建議使用網站兼容性掃描工具 http://dev.modern.ie/tools/staticscan/ 來掃描你的網站，看看你的網站是否存在一些兼容性問題。請根據如下五步進行檢查，就可基本解決兼容性問題，實現對Google Chrome、Microsoft Edge、Apple Safari等現代瀏覽器的兼容。css

1. 檢查網站是否在標準模式下渲染html

　　在W3C的標準出臺前，瀏覽器對網頁的渲染沒有統一的標準，各家有各家的方式。當W3C標準出來以後，標準的渲染模式就稱之爲標準模式，而各家瀏覽器還保留了原來的渲染方式來兼容舊版本的網站，稱之爲"Quirks Mode（通常翻譯爲怪異模式或者兼容模式）"。那瀏覽器怎麼知道用標準模式仍是兼容模式來解析你的網站呢？如今的瀏覽器廠商們基本都是用Doctype來判斷。若是你的網頁沒有Doctype的聲明，那麼瀏覽器就認爲你的網站是老舊版本，瀏覽器將啓用兼容模式來解析你的網站，這樣對於用戶來講，將不可以獲得足夠優秀的體驗。git

檢查你的網站是否被使用兼容模式渲染，最簡單的方式是使用IE做爲測試工具來測試。github

在IE11中打開你的網站。
按F12鍵啓動F12開發人員工具，或者你也能夠在IE的工具欄中找到它。

檢查工具欄右上角是否有Edge的標誌，若是有Edge標誌，那麼恭喜你，你的網站已經運行在符合IE最新標準的標準模式下。若是顯示不是Edge，那麼你的網站是在兼容模式下渲染。

若是你的網站是被看成兼容模式渲染，那麼多是存在如下問題：web

DOCTYPE無效或者缺失

檢查是否使用了有效而且格式正確的DOCTYPE。若是你的網站是採用HTML5標準的網站，請使用標準HTML5的Doctype聲明：。小程序

<!DOCTYPE html>

文檔模式受到X-UA-Compatible這個元標籤的強制限制

　　在IE11以後已經棄用文檔模式，除了臨時狀況外不該再使用。若是你當前針對舊文檔模式使用 X-UA-Compatible 標頭，那麼你的網站可能沒法使用IE11最新的功能。若是必須針對特定文檔模式，以便支持你如今的網站可以工做，則須要注意，你使用的是過渡功能，之後的版本中可能不提供該功能。請在頁面檢查是否存在相似如下的代碼，刪除並從新測試你的網站。api

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

<meta http-equiv="X-UA-Compatible" content="IE=8">

可能你的網站處於兼容性視圖列表（Compatibility View List）中，IE強制將你的網站在兼容視圖中顯示，以保證網站可以正確顯示。

首先檢查你的網站是否在兼容性視圖列表中。兼容性視圖列表是一個xml文件，該文件位於：瀏覽器

C:\Users\%YOUR_USERNAME%\AppData\Local\Microsoft\Internet Explorer\IECompatData\iecompatdata.xml緩存

這個文件維護着系統下的網站與IE的兼容信息，每日更新。若是你發現你的網站存在於兼容列表中，請你修改網站中不符合HTML5標準的內容，而後向iepo@microsoft.com 發送電子郵件，請求在 Web 上有可用更新時，請求將你的網站移出兼容性視圖列表。郵件須要包含如下內容：（全部者名稱、公司職務、電子郵件地址、電話號碼、公司名稱、街道地址、網站地址）。安全

微軟將審查提供的信息，並在下一個計劃的列表更新時從"兼容性視圖列表"中刪除你的站點

2. 檢查你使用的框架與類庫是否存在兼容性問題

　　使用一些過期的框架和類庫有可能引發兼容性問題，請仔細檢查你的網站使用的框架和類庫的版本信息與其最新版本信息，看看是否與最新版本的IE兼容。建議使用兼容性最高穩定性最好的框架版本，好比JQuery請使用1.7.2版本。若是使用最新的版本的話，請進行屢次測試。除了穩定性最高以及最新的版本兩個版本之外的版本，不推薦使用。

　　大家可能會問哪一個版本纔是兼容性最高穩定性最高的框架版本呢？

　　請使用http://dev.modern.ie/tools/staticscan/ 掃描你的網站，網站會檢查你是否使用了流行的框架、檢查其版本並給出建議。

3. 檢查你的網站是否還依然在使用UA探測

　　之前，要知道用戶的瀏覽器是否支持一個特殊的功能的方式一般是檢測瀏覽器的類型以及版本，而後選擇相應的代碼段執行，這個過程一般稱之爲User Agent檢測，簡稱UA檢測。可是這個過程是很是容易出錯的，容易被欺騙，代碼邏輯複雜，並且隨着瀏覽器版本的增長，維護困難。

　　在如今的web開發中，咱們會有更好的方式來解決這些問題。如今都基本不檢測瀏覽器的類型和版本了，如今用本地的方法和對象來檢測用戶的瀏覽器所是否是支持某些功能，咱們稱之爲功能檢測。經過功能檢測，咱們可以知道某個方法在某個瀏覽器上是否真正可用，調用更加安全，邏輯也更加清楚。

//錯誤示範，極不推薦
if (navigator.userAgent.indexOf("MSIE 7") > -1) {
// Only for IE7
}

//√正確示範，推薦作法
function load() {
　　if ('localStorage' in window) {
　　// Now use local storage
　　return;
　　}
}

　　推薦使用自動化工具Modernizr來進行功能檢測，而後根據檢測的結果來執行相應的邏輯，而不是根據UA檢測的結果。更多關於功能檢測的請參考這裏：http://te-webtraining.azurewebsites.net/cn/samples/feature-detection.html

4. 檢查你的瀏覽器前綴是否正確

　　咱們在作Web開發的時候，咱們須要用到瀏覽器前綴（Vendor prefixes）來使用一些比較新的CSS或者JavaScript的屬性。瀏覽器前綴包含CSS前綴以及JavaScript前綴，咱們說到瀏覽器前綴通常是指CSS前綴。CSS前綴是用來添加對一些實驗性的功能或者屬性的支持。他們不是CSS標準的一部分，可是他們是瀏覽器現存的一些屬性，也許將來會成爲CSS 標準的一部分。

　　如下是四個主要的瀏覽器前綴：

-ms-	Microsoft
-moz-	Mozilla
-o-	Opera
-webkit-	Safari, Chrome, 以及其餘基於WebKit的browsers

　　也許有的時候屬性加了-webkit-或者-moz-，就是沒有-ms-。若是在IE中默認屬性沒有正常工做，嘗試一下加上IE的瀏覽器前綴-ms-，-webkit-, -moz- 和-o-不會影響IE怎麼渲染屬性。當前的IE10和IE11已經支持了很是多的CSS3標準屬性，保證標準屬性在沒有前綴下也能正常工做。當屬性沒有正常工做的時候，加上 -ms-試試吧（或者到caniuse.com查查看）。　　標準屬性能夠在不少如今的瀏覽器中正常工做，可是若是你不肯定某個屬性是否須要前綴或者是否能在某個瀏覽器工做，能夠上 caniuse.com查看。全部這些工做都很是得耗費精力和時間，因此咱們是否是能夠有自動化的過程呢?　　答案是確定的。對咱們開發者開說，有不少自動化工具來幫助咱們完成前綴的過程。這些工具可以幫助咱們大大提升添加瀏覽器前綴的效率。你能夠選擇前期處理的mixin工具包如Sass 的 Compass 和Stylus的 Nib 。可是若是你不想要包含他們全部的Mixin庫，你只是想把你的CSS加上瀏覽器前綴，那你可使用Autoprefier。Autoprefixer將會解析你的CSS文件（若是是使用前期處理工具，那麼是在編譯以後）而且根據caniuse.com上的數據添加適當的瀏覽器前綴。這個工具將幫你寫CSS的時候無需擔憂某一個屬性是否可用或者是否該加瀏覽器前綴。

　　而對於JavaScript前綴來講，目前尚未比較好的自動化工具，不過你仍是能夠經過caniuse.com來查詢。

　　更多關於瀏覽器前綴的內容，請訪問：http://te-webtraining.azurewebsites.net/cn/samples/vendor-prefixes.html

　　下載並使用Autoprefixer，請訪問：https://github.com/postcss/autoprefixer

5. 檢查你的網站是否還在使用插件

　　隨着移動互聯網的發展，愈來愈多的瀏覽行爲是在日益增多的移動設備以及這些設備自帶的瀏覽器上發生的，所以愈來愈多的用戶正在不支持插件的瀏覽器下瀏覽。向這些不使用插件瀏覽的用戶提供優秀的網站體驗，是一項很是重要的工做，由於網站必需要面向最普遍的目標羣體。並且愈來愈多的現代瀏覽器已經宣佈中止支持插件技術，好比Google宣佈在Chrome42版本以上再也不支持NPAPI，詳細請見：https://www.chromium.org/developers/npapi-deprecation 。微軟Edge也不支持ActiveX、BHO等插件技術。

咱們建議網站再也不使用這些插件技術，利用HTML5，現代的瀏覽器和網站即便不用插件，也能提供優秀的用戶體驗。

功能	基於插件的技術示例	基於標準的等效技術	詳細信息
視頻和音頻	Flash、Apple QuickTime、Silverlight	HTML5 視頻和音頻	視頻、音頻
圖形	Flash、Apple QuickTime、Silverlight、Java 小程序	HTML5 Canvas 、可縮放的向量圖形 (SVG)、級聯樣式表級別 3 (CSS3) 過渡和動畫、CSS 轉換、WebGL	Canvas、SVG、過渡、動畫、轉換、WebGL
脫機存儲	Flash、Java 小程序和 Google Gears	Web 存儲、文件 API、IndexedDB 和應用程序緩存 API	Web 存儲、文件 API、IndexedDB 和應用程序緩存 API
網絡通訊、資源共享和文件上載	Flash 和 Java 小程序	HTML5 Web 消息傳遞和跨源資源共享 (CORS)	通道消息傳遞、XMLHttpRequest