還原ie瀏覽器設置「升級ie8前升級」

互聯網發展的速度超乎你我的想像。不過「水能載舟，亦能覆舟」。快速發展雖然創造了無限機會，但是也同樣衍生了其他問題。Mozilla 向大家闡述目前的網路環境，以及我們最關心的問題：跨瀏覽器兼容性。

據統計，現有數百萬個網站對一個甚至多個主要瀏覽器產生兼容性的問題，也造成極差的用戶體驗。Web 開發者社區應該修正此問題。

互聯網在過去 20 年裡有著大幅度的轉變。1996 年大約只有100 萬個網站；現在已經超過 10 億個網站。同樣，當年大約只有 5000 萬個網民；現在已超過 30 億上網人口。面對如此多的網路內容，現在大約有 24000 款移動設備，共達到 81 億台聯網設備讓大家隨時享受。

從上圖可看出：與 20 年前相比，上網人口成長了 60 倍、網站數量是以前的 1000 倍、上網設備種類增長了 24000 倍。

內容、設備、用戶的爆炸性增長，讓「跨瀏覽器兼容性」也是自 1996 年以來更亟待解決的問題。知名網站〈Stack Overflow〉上就有 55,000 個問題包含了「跨瀏覽器（cross-browser）」的關鍵詞在內，更有數不清的問題是在詢問「在某個瀏覽器中的運作情形」。任何有關特定瀏覽器顯示特定網站的問題，當然也就是潛在的兼容性問題。

上圖說明：在〈Stack Overflow〉網站中，包含以上關鍵詞在內的問題數量。

所以，跨瀏覽器兼容性還是個不小的問題。除了 Mozilla 長期注意這件事情之外，我們認為其他人也該時時關心一下。為什麼要關心這個問題？開發者怎能確定所有人都跟你用一樣的瀏覽器？每個人的需求與習慣不盡相同。幾乎沒有人會因為僅一個網站不能正確顯示內容，就換個瀏覽器。滿足所有人的需要，就代表你確實掌握了自己的實力。而且現在有很多工具可以用協助你輕鬆達成。

那麼到底是哪些因素造成了跨瀏覽器不兼容呢？答案很複雜。以下是目前最常見的原因：

• 開發者用了某款瀏覽器的專屬功能（如特定前綴），以達到特殊效果。
• 瀏覽器廠商在某功能標準化之前，就快速完成產品以供開發者所需。
• 瀏覽器廠商在構建標準或修復錯誤的速度過慢。
• 某些網站可能布署了「識別用戶瀏覽器（User Agent Sniffing）」，以針對不同的瀏覽器傳送不同的內容。
• 開發者可能過於依賴單一工具（又可能僅支持單一瀏覽器），因此忽略了跨瀏覽器兼容性的錯誤。
• 產業的成長力吸引更多Web開發者加入，但也造成開發者的平均水平被拉低。

上圖說明：其實 W3C 已經規範 12,106 組 API，但未有任何一款瀏覽器完全實現。而且開發者使用 Chrome 的比例失衡，遠超過用戶的比例。

在互聯網發展初期就有某些挑戰等著我們去解決。當然，Web 的開發水平在這些日子以來已有很大進步。許多產品與工具可幫助我們在所有瀏覽器上構建絕佳的體驗。

開發者應改詳細閱讀以下幾點並認真思考，讓自己的下個網站能向所有人提供更豐富的內容。

使用其他瀏覽器的人比你想像的要多

許多開發者認為自己使用的瀏覽器，就是其他人所用的唯一瀏覽器，因此只針對該瀏覽器開發網站。根據某些統計數字指出， 70% 的 Web 開發者在台式機上使用 Chrome，但只有 45% 的網民是跨所有設備都使用 Chrome，也只有 57% 的網民在台式機上使用 Chrome。只在 Chrome 構建並測試網站，就忽略了將近一半的全球用戶。

瀏覽器市場佔有率也依地理位置不同而有所不同。Chrome、Firefox、IE/Edge 在許多地方都獨佔鰲頭，但用戶的比例不一。德國人比較愛用 Firefox；日本人則常用 IE；不少澳洲人選用 Safari。每 5 個越南人就有超過 1 人使用 Chromium 的分支「Cốc Cốc」瀏覽器。只對單一瀏覽器設計自己的內容，就會錯失這些較獨特的市場。

其實，你愛用的瀏覽器功能，不一定適用於其他瀏覽器。瀏覽器廠商對不同功能往往有不同的開發安排。所以可能一堆人無法享受某瀏覽器的新 API。

這些因素往往會在意外狀況下一起發生：選用了所有瀏覽器不支持的 API，只用單一瀏覽器測試自己的網站，接著在該瀏覽器並不普及的市場中發布了網站，結果就可能先喪失超過一半的潛在用戶，也就等於錯失了許多收益與客戶。我們當然應該多花點心思避免類似的情況。

兼容性將影響網站親和度

可跨瀏覽器兼容的網站，代表著它必須針對未知的客戶端環境設計並撰寫程序代碼，才能儘可能讓最多人接觸到網站內容。而用戶當然也可能是身心殘疾人士，且相關人數可能超乎你的想像。如果你的網站能在所有瀏覽器上都運作暢通，卻忽略了屏幕閱讀軟體（Screen reader），也就又失去了可能的機會。

身心殘疾者也是一個龐大的市場。舉例來說，光是美國國內視力障礙的網民總人數，就超過全加拿大的上網人口。最新的 Web 功能早就可以滿足這類用戶的需要，就等開發者實際開發而已。

關於網站親和度的存取技術，可不僅是對身心殘疾者有所幫助，舉例來說：

• 更適合閱讀軟體執行的網頁，也就能更貼合搜索引擎演算法。簡單的存取技術，例如為圖片設定替換文字、在鏈接中使用敘述性的文字、僅 CSS 用於網頁風格、使用 HTML5 的語法卷標，都能提升整體網頁的搜索引擎優化（SEO）。
• 影音內容的轉換，不僅對聽障人士有所幫助，也有助於位處低帶寬地區（無法下載完整影片）的移動設備用戶，也能解決嘈雜環境中聽不到影片聲音的情況。更多文字內容也有機會與關鍵詞產生關聯性。所以同樣和 SEO 息息相關。

用戶不切換瀏覽器，只切換網站

你可能想說用戶會換瀏覽器再進入你的網站，但其實許多人不會換，或根本無法換瀏覽器。

用戶對無法運作的東西沒什麼耐心，而是直接換去競爭對手的網站就好。某個關鍵環節要是發生錯誤，就可能讓潛在用戶一去不回。根據 Akamai 的統計：

• 32% 的用戶只要在網站上遇到問題，幾乎就不會進行任何在線交易了。
• 35% 的用戶更會對網站留下負面印象。
• 45% 的人再也不會上你的網站。
• 超過 22% 的人會離開網站找其他沒問題的網站。

不只如此，許多用戶根本不知道該如何安裝新的瀏覽器，甚至不知道什麼是瀏覽器；其實很多人不知道「網站」、「瀏覽器」、「搜索引擎」之間的差異。

即使知道可以、想要安裝新的瀏覽器，也可能沒辦法安裝。許多公司限制員工只能用某款瀏覽器，或是如圖書館中的公用計算機也無法安裝其他軟體。

舉例來說，微軟（Microsoft）曾要求用戶在 2016 年 1 月 12 日之前改用新版瀏覽器，但直到 2016 年 3 月為止，IE 用戶仍超過 1/3 繼續在用過期且再無安全更新的版本。從 2015 年 6 月到 2016 年 5 月的這一年裡，還有 2.07% 的用戶在用已停止更新的 IE8；同一年裡超過 3/4 的時間，還有 1.59% 的人在使用 IE9。而 IE10 在全年有 10.95% 的市場佔率。另外值得一提的是，從 3 月開始，這些瀏覽器的使用率已經大幅度下滑。

不順暢的上網體驗絕對會趕走用戶。如果網站有一半流量是來自於不同的瀏覽器，而你也想維持這些流量，當然就應該用此款瀏覽器測試自己的網站。

上圖說明：至少有 43% 網民使用的瀏覽器，與開發者所偏好的不同。而且不同國家所愛用的瀏覽器也大有不同。

兼容性=你自己的實力

構建 Web 內容需要非常專業的技術，可不像簡單的打掃環境而已。我們都為自己的作品而自豪，不斷磨練自己的技術，企圖展現自己的專業程度。因此必須：

• 隨時關注最新的技術與框架。
• 仔細測試並構建跨瀏覽器/平台的 App，為功能尚未完整的瀏覽器找出解決之道。相關體驗又是否為人所接受？
• 確認殘障人士也能輕鬆讀取網頁內容。
• 確保一般讀者樂於接收你的內容，也要能滿足自己/用戶的需求。

因此，身為網站開發者，你所成功發布的網站也就代表你自己的履歷。你的客戶、同事、目前與未來的老闆，都會在乎是否能享有絕佳體驗。

但往往時間與業務上的限制而無法盡善盡美。你必須先滿足交件期限；你的老闆可能只在乎 iPad 上是否能正常顯示網站，根本沒聽過「網站親和度」或「可存取性」。你在期限內根本無暇修正 IE 錯誤。即使無法達到最理想的狀態，也應當在規定時間內儘力完成。

期限逼近時，你會希望自己所用的框架也能測試跨瀏覽器兼容性，這樣可幫你省下許多工夫。但你的網站並非純粹的框架程序代碼，而且你必須全權負責。跨瀏覽器兼容性的測試工作應腳踏實地，不能想著抄捷徑去完成。

寫程序代碼必須努力堅持；為需要的人提供信息；所建立的豐富功能也要能讓所有人享受。這些都是優秀 Web 開發者的終極目標。

許多新工具都能幫上忙

現在你知道「重視自家網站兼容性」的理由了，但要怎麼做呢？

• 如果在別人的網站上發現錯誤，就到 webcompat.com 報錯吧！如果你在為自己的網站排錯，就應該常上去看看。
• 用不同的瀏覽器測試自己的網站，並站在用戶的角度瀏覽整個網站。通過瀏覽器開發者工具的控制台尋找錯誤。目前主流的PC版瀏覽器都已內置強大的開發者工具，可協助找出排錯問題，甚至可用於移動版：
  • Firefox dev tools
  • Chrome dev tools
  • IE/Edge dev tools
  • Safari dev tools
  • Opera dev tools
• 如果找到的問題並非發生在自己的網站上，就可能是瀏覽器出錯了！立刻回報錯誤，以便該款瀏覽器的開發者儘快修復：
  • Mozilla Bugzilla
  • Chrome issue tracker
  • IE/Edge
  • Safari/Webkit
  • Opera
• 若能在自己的布署過程中整合常用的跨瀏覽器測試工具，就能測試得更順利：
  • BrowserStack
  • Sauce Labs
  • Browserling
• 在自己的網站上使用某個 Web 功能之前，先確認有哪些瀏覽器已經工作：
  • Caniuse
  • MDN 的兼容性表格
  • Kangax 的 ECMAScript 兼容性表格
• 先了解程序代碼撰寫工具，可提升跨瀏覽器的兼容性：
  • Autoprefixer、CSSNext、Oldie，及其他 PostCSS 插件，都能寫出純粹、新版 CSS 且不會在舊版瀏覽器中間斷（Break）。
  • Modernizr 可協助找出瀏覽器之間的工作差異並處理（可用以取代 UA sniffing）
  • @supports 協助你為網頁體驗創建更進步的強化功能，用於更多功能更強的瀏覽器
• 請多了解網頁的眾多功能與小秘訣。知道越多就會越愛網頁：
  • MDN
  • Google Developers
  • W3C Developers