【譯】這些理由告訴你,你早就該放棄支持IE了……

NO IMAGE

【譯】這些理由告訴你,你早就該放棄支持IE了......

2025 年 10 月 14 日 —— 記住這個日子,據說(非官方說法)這一天過後,微軟就不再支持 IE11 了。為什麼我要告訴你這件事呢?因為,正如你可能知道的,IE 作為一款瀏覽器讓廣大 web 開發者大傷腦筋。不過它真就那麼差嗎?在 2020 年你是否還需要提供對 IE 的支持呢?

聊點歷史

Internet Explorer(IE)是一款最初由微軟在 1995 年發佈的 web 瀏覽器。那時 web 瀏覽器剛誕生不久,標準也沒有廣為遵循。JavaScript 甚至還在“襁褓”之中(它是在 1995 年 12 月發佈的),而各個瀏覽器都有自己的非標準特性、附加組件以及插件。

因此,微軟在 1995 年帶著 IE 進軍瀏覽器市場的時候,幾乎沒有遇到競爭對手(除了 網景導航者)。在最初的版本發佈後不久,微軟就開始在其非常流行的操作系統 —— Windows 的每一個新版本中免費提供 IE。這帶動了 IE 使用量的急劇增加,在 21 世紀初它的市場份額已經超過了 90%。當然,這裡面並不乏反壟斷以及權力濫用的爭議,但這裡不敞開聊這些。

“抱歉,該網站只能在 IE 運行”,類似這樣的對話框和彈出窗口一度充斥用戶屏幕。不過,這一切很快就結束了,因為微軟沒有能力改進自己的 web 瀏覽器,反而是引入了各種奇怪的特性。這個時期,Web 的可訪問性得到增強,其它 web 瀏覽器開始進軍市場(比如 2008 年的 Google Chrome)。再加上移動端IE Mobile —— 曾經也是有這麼一個東西的)的興起,導致 IE 的市場份額持續下跌,現在只有大約 1.5%

【譯】這些理由告訴你,你早就該放棄支持IE了......

瀏覽器市場份額統計表

最後,甚至連微軟也承認自己在 web 瀏覽器上的敗北。因此,微軟在 2015 年發佈 Windows 10 的同時,還發布了一款全新的 Edge 瀏覽器,該瀏覽器完全重寫了以前的內部代碼。不過,低市場份額以及用戶普遍懷揣著“安裝 Chrome 瀏覽器就夠用了”的心態,無不說明這款瀏覽器難擔大任。微軟不得不另闢蹊徑。

再過幾天,也就是 2020 年 1月 15 號,帶有全新圖標並以 ChromiumChromeOpear 以及許多其它的瀏覽器都使用了該內核)作為內核的 新版本 Edge 將捲土重來。這一次,微軟會再次嘗試贏回自己的用戶群。你可以在這裡下載該瀏覽器的 beta 版本,我不得不承認 —— 這款瀏覽器屬實可以。有點像 Edge 和 Chrome 的合體狀態!

殘缺的特性

讓我們回到正題。最近,在進行這個網站(譯註:指作者的個人網站)的重構時,我在考慮為了支持 IE 得做多少工作。結果表明 —— 相當相當多!所以,對那些佔比不到 0.4% 的仍然使用 IE 瀏覽器的讀者們,我感到抱歉,因為往後我就不會再支持 IE 了。為了證明我的選擇是正確的,我們來設想一下一個網站為了支持 IE 11(這裡考慮的甚至不是更古早的版本)需要放棄多少東西。

JavaScript

2015 年 ES6 的推出使得 JS 人氣暴漲。由於 IE 11 是在 2013 年推出的,並於不久後的 2015 年被 Edge 取代,因此它沒有辦法支持現代 ES6 的特性。也許你認為這算不上一個問題,畢竟類似 Babel 這樣的工具可以近乎完美地解決兼容性問題。不過,有些特性是沒辦法通過 polyfill(用“舊”代碼替換) 解決的。此外,大部分瀏覽器也都支持 ES6,這時候仍然採用 polyfill,只會造成不必要的代碼臃腫和開發流程複雜化。

EcmaScript 6

Can I Use 上的數據表明,IE 11 不支持大部分 EcmaScript 6(ES6)的特性。這意味著它無法使用諸如箭頭函數或者是這樣的語法糖,也無法使用諸如 PromiseWeakSet 這樣的新特性。其它的,諸如(WeakMapSet 以及 let/const 變量聲明,只得到了部分支持。當然,比 ES6 更新的特性也很少見(如果有的話)。

這樣的例子還有很多,但我不想吹毛求疵。其它瀏覽器的舊版本也不支持某些特性,但它們要麼經常(無縫地)更新,要麼沒有那麼流行。

Web API

由於 Web API 不是 JavaScript 本身的一部分,因此它允許在 Web 上使用一些獨有的功能。然而,與那些涉及語法的特性不同,這些功能在大部分情況下都是沒有辦法通過 polyfill 實現的。

從更相關的 Web API 來看,IE 缺乏對 Fetch APIWeb Notifications 以及 WebRTC 的支持。而這三者之中只有 Fetch API 有對應的通過使用 XMLHttpRequest 實現的 polyfill。值得慶幸的是,Notification API 和 WebRTC 都是為現代的、功能豐富的 web 應用而設計的,這些應用從一開始就沒有打算面向 IE。

還有一些 Web API 只得到部分支持。最顯而易見的也許就是 WebGL 了。WebGL 2 很顯然是不支持的,這我們都清楚,但重點在於 IE 11 甚至要通過 "experimental-webgl" 標識符而不是標準的 "webgl" 來訪問 WebGL 上下文。

HTML/CSS

如果你想要增加難度的話,可以創建一個不使用 JavaScript 的網站。不過一想到有服務端渲染(SSR)或者 JAMStack(靜態網站)這類技術作為支撐 —— 這實際上也並不會很難。但我們沒辦法不使用 CSS,更別提 HTML 了!不幸的是,IE 恰恰就有很多 HTML 和 CSS 方面的問題。我們來舉幾個例子。

HTML

就 HTML 而言,問題還沒那麼大 —— 如果你認為對 HTML5 只能做到部分支持“不算問題”的話。拋開一些標準本身發佈後才引入的特性不談,IE 並沒有缺失對大部分 HTML 特性的支持,所以這方面問題不大。

CSS

但 CSS 可就不一樣了。IE 對很多重要的特性都只能做到部分支持,諸如 彈性佈局網格佈局CSS 變量以及視口單位(如 vmax)。有的可以使用前綴實現,有的則要麼缺乏某些功能,要麼只支持舊的、不兼容的規範版本。CSS 仍然可以依靠諸如 PostCSS 這樣的工具進行處理,但還是太麻煩了,畢竟大多數瀏覽器都完全可以支持前面所說的那些特性。

案例學習

出於撰寫文章的需要,我不得不離開舒適的 Linux,前往 Windows 10 最黑暗的一角 —— IE 11。不得不承認 —— 這個瀏覽器的體驗和性能實在是差強人意。我忍不住回想起所有關於 IE 的點滴笑話;)。不管怎麼說,既然我們對 IE 11 受限的特性有了一定了解,現在讓我們瀏覽一些網站,看看它們是如何工作的吧!

Areknawo

【譯】這些理由告訴你,你早就該放棄支持IE了......

IE 11 上的 Areknawo

首先從我的博客網站開始。在當前的版本中,它表現得還挺好的,只是 JavaScript 無法運行。頂部廣告無法顯示,訂閱通知框以及每篇博文下的 Disqus 評論消失了,AJAX 頁面轉換失效。所有的這一切都歸功於……IE 不支持我在代碼中使用的 ES6 模板字符串

老實說,我並不打算修復這個小問題 —— 尤其是進行不兼容 IE 的重構時。因為這沒啥意義。這個博客是面向 web 開發人員或者”技術“人員的,而他們通常會使用最新的、最好的工具。大部分的目標用戶群體根本不使用 IE,就算使用了……興許也只是為了做測試 ;)。

YouTube

【譯】這些理由告訴你,你早就該放棄支持IE了......

IE 11 上的 YouTube

在 IE 上打開 YouTube 感覺就像是回到了過去。一切正常,但 UI 已經過時了。貌似谷歌給 IE 留下了最後一個兼容的版本。明智之舉。但是對於小組織和小公司來說,維護同一網站的舊版本可能有點浪費資源。

GitHub

【譯】這些理由告訴你,你早就該放棄支持IE了......

IE 11 上的 GitHub

GitHub 直接了當地告訴你,你當前使用的瀏覽器是不受支持的。有意思的是,GitHub 現在是屬於微軟的。不過我並不是在責備他們 —— 他們的做法沒錯。不管怎樣,你可以關閉這個小對話框,但緊接著你會發現工具欄是壞的,登錄頁面似乎也有問題,一直顯示在加載中。出於安全性考慮,我沒有嘗試進行登錄 —— IE 過去發生了很多安全性問題。

CodePen

【譯】這些理由告訴你,你早就該放棄支持IE了......

IE 11 上的 CodePen

CodePen 同樣顯示了一個對話框,不過這個對話框更大,而且”無法關閉“。上面說,高級會員可以配合 Debug View 進行使用,不過我沒有進行測試,所以這裡不發表意見。

CSS-Tricks

【譯】這些理由告訴你,你早就該放棄支持IE了......

IE 11 上的 CSS-Tricks

CSS-Tricks一個簡單的網站 —— 它使用的 JS 並不多,內容大多都是文本。也沒有任何對話框或者信息彈出 —— 只有內容殘缺的頁面。樣式不生效,部分東西無法顯示,但至少內容和文章還是可以閱讀的。

其它網站

【譯】這些理由告訴你,你早就該放棄支持IE了......

IE 11 上的蘋果官網

”反 IE“的網站太多了,我沒辦法在本文一一窮舉。不過,我還是稍微再吐槽一下!流行的生產力工具 SlackTrello 不允許你使用 IE 登錄網站,甚至蘋果官網首頁的佈局也是完全崩壞的!其它頁面看起來沒問題,但是沒有華麗的滾動特效,並且無法購買任何東西,除非”更新你的瀏覽器“ 。

如果你覺得上面這些案例不夠,你還可以用 IE 11(如果你使用的是 Windows 10 —— IE 11 可能還在) 打開你經常瀏覽的網站。然後,你就能切身體會到我這一路上經歷的痛楚了!;)

結束語

本文的主要目標就是為了告訴你,已經沒有必要兼容 IE 了。在使用現代特性時,你應該會覺得更加放得開,尤其是著手新項目的時候。

我聽說一些企業依賴於只能在 IE 上運行的代碼,並且承擔不起更新的成本。依我之見,這種設計太差了 —— 無意冒犯。互聯網從來都是不斷變化和發展的,唯有學會適應和改變才能存活下來。如果你的 app 不允許你這麼做,那麼它就是失敗的。這只是我個人的觀點。事實上,我甚至瀏覽過一個 —— 說來好笑,連 IE 11 都不支持的網站!只有使用舊版本的瀏覽器才能正常訪問該網站 —— 儘管這些瀏覽器早就不被支持了。

所以,除非你面向的用戶群體非常廣泛且特殊,否則我會勸告你:不要在 IE 上花太多功夫。如果對 IE 的支持不會給你帶來任何損失或者是限制你產品的功能,那儘管去支持好了!不過,想想我們前面討論過的那些特性,現實往往是殘酷的……

好了,本文內容到這裡就結束了!你對支持 IE 這件事的看法是什麼?你的網站又是否會支持 IE 呢?請在底下的評論發表你的看法。另外,如果你喜歡這篇文章的話,可以把它分享給其他人,並關注我的 TwitterFacebook,或者是通過 weekly newsletter 實時獲取我的最新文章。如果你感興趣的話,也可以關注我的 YouTube 頻道 ,歡迎點贊和訂閱!最後,感謝你閱讀本文,祝你有美好的一天!

相關文章

Netty源碼分析系列之writeAndFlush()上

小程序摸爬滾打之路

vue的開發總結

[譯]合成事件對象