# 前端工程研究：HTML/CSS/JavaScript 相容性檢查資源整理

我們公司自從開出**前端**的職缺並成功找到人才後，就開始積極的切割 **前端** / **後端** 的工作，期望前後端的分工架構能夠形成，將網站建置的品質持續向上提升。然而，前端的工作並不輕鬆，其中一個很沒效率的工作就是「跨瀏覽器相容性測試」，經常擊倒不少人，因此打算整理一些不錯的相關資源，如果各位有任何推薦的相關資源，歡迎隨時留言給我，我隨時加上，感恩。

**CSS 相容性檢查資源**

-   [CSS3 Selectors Test, CSS3 .info](http://tools.css3.info/selectors-test/test.html)  
    **說明:  
    **我們知道有很多線上 CSS 查表工具，但內容太過繁雜，如果你只想針對特定瀏覽器查詢特定瀏覽器的 CSS 選取器支援度，透過這個網頁可以很快速的得知完整的測試結果。  
    **用法:**  
    開啟瀏覽器，打開以下網頁，就會開始測試該瀏覽器對 CSS 選取器的支援程度!
-   [QuirksMode - CSS](http://www.quirksmode.org/css/)  
    **說明:**  
    這是網路知名人物 [Peter-Paul Koch](http://www.quirksmode.org/about/) (ppk) 經營的網站，有非常完整的跨瀏覽器 CSS 支援度測試報告，你可以從這裡查詢到各種 CSS 選取器、屬性、屬性值等等各式各樣的跨瀏覽器測試結果，非常具有參考價值。
-   [CSS Compatibility in Internet Explorer (Internet Explorer)](http://msdn.microsoft.com/en-us/library/hh781508.aspx)  
    **說明:  
    **Well, you know! 我們在討論「相容性」的時候，通常不會考慮 “**非 IE 瀏覽器**” 的相容性議題，因為每當 “**非 IE 瀏覽器**” 發生相容性問題時，所有人都會叫你直接升級到「最新版」就能解決，所以我們在討論「相容性」議題時，大部分的情況都在討論 IE 各版本的相容性問題。  
    這份 CSS 相容性文件，則是由微軟官方撰寫，也非常具有參考價值。
-   [Guide to CSS support in email | Campaign Monitor](http://www.campaignmonitor.com/css/)  
    **說明:  
    **曾經發過電子報的人們，一定了解發電子報的痛苦，要設計出一份可以讓所有人看到而且呈現一致的電子報有多麼的困難，尤其是你用 CSS 排版的時候，測試真的會測到抓狂！這份文件完整的列出目前市面上最知名的 10 大收信介面 (email clients)，清楚的列出哪些樣式你能用、哪些樣式你不該用，不想再用 Table 排版與整份電子報都變成圖片的設計師，可以好好參考這份文件。

**JavaScript 相容性檢查資源**

-   [ECMAScript 5 compatibility table](https://compat-table.github.io/compat-table/es5/)  
    **說明:**  
    [ECMAScript](https://ecma-international.org/publications-and-standards/standards/ecma-262/) ([Wikipedia](http://en.wikipedia.org/wiki/ECMAScript)) 是瀏覽器內建的程式語言規格，而 JavaScript 則是 ECMAScript 規格的一種實作，[ECMAScript 第三版 (v3)](https://ecma-international.org/wp-content/uploads/ECMA-262_3rd_edition_december_1999.pdf) 在 1999 年 12 月釋出，所以從 IE6 開始，就已經完整支援 ECMAScript v3 所有特性，所以沒有相容性問題。  
    雖然歷史上曾經定義過 ECMAScript v4 版本，但最終並未完成規格定制，最後直接廢止，改發展 ECMAScript 第五版 (v5)，但正式釋出的 [ECMAScript v5.1](http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf) 公告時間是 2011 年 6 月，因此存在跨瀏覽器版本的相容性問題，這個網頁可以查詢各瀏覽器支援 ECMAScript v5.1 的程度。
-   [ECMAScript 6 compatibility table](http://kangax.github.io/es5-compat-table/es6/)  
    **說明:**  
    ECMAScript v6 是一個正在制定中的規格，尚未釋出正式版，所以各瀏覽器支援度不一，也不建議使用。這份文件單純提供一個參考資源。
-   [JavaScript - Table of Contents](http://www.quirksmode.org/js/contents.html)  
    **說明:  
    **這是網路知名人物 [Peter-Paul Koch](http://www.quirksmode.org/about/) (ppk) 經營的網站，也針對 JavaScript 相容性部分做出許多研究分析。我們知道 JavaScript 在各瀏覽器之間，在 JavaScript 語言核心部分通常沒太大問題，真正有相容性問題的地方，通常出在跟 BOM (Browser Object Model) 與 DOM (Document Object Model) 相關實作，尤其是 [Event compatibility tables](http://www.quirksmode.org/dom/events/index.html) 這份文件值得一看。
-   [Acid Tests - The Web Standards Project](http://www.acidtests.org/)  
    **說明:**  
    Acid 是 [Web Standards Project](http://www.webstandards.org/) 的一項瀏覽器測試工具，專門用來測試各瀏覽器是否符合各種網路標準，最新的 [Acid3](http://acid3.acidtests.org/) 則是目前的最新版，測試的範圍非常廣，包含以下這些領域，詳情可參見 [Acid3 - Wikipedia, the free encyclopedia](http://en.wikipedia.org/wiki/Acid3) 的說明。( **註**: IE 瀏覽器從 IE9 才開始拿到滿分 )
    -   DOM2 Core
    -   DOM2 Events
    -   DOM2 HTML
    -   DOM2 Range
    -   DOM2 Style (getComputedStyle, …)
    -   DOM2 Traversal (NodeIterator, TreeWalker)
    -   DOM2 Views (defaultView)
    -   ECMAScript
    -   HTML4 (object, iframe, …)
    -   HTTP (Content-Type, 404, …)
    -   Media Queries
    -   Selectors (:lang, :nth-child(), combinators, dynamic changes, …)
    -   XHTML 1.0
    -   CSS2 (@font-face)
    -   CSS2.1 (‘inline-block’, ‘pre-wrap’, parsing…)
    -   CSS3 Color (rgba(), hsla(), …)
    -   CSS3 UI (‘cursor’)
    -   data: URIs
    -   SVG (SVG Animation, SVG Fonts, …)

**HTML5 相容性檢查資源**

-   [Can I use... Support tables for HTML5, CSS3, etc](http://caniuse.com/#cats=HTML5)  
    **說明:**  
    HTML5 帶來新的語意標籤與大量的 JavaScript API 規格，這個 Can I use 網站做了非常完整的跨瀏覽器測試紀錄，並且提供了非常便利的查詢介面，如果要使用 HTML5 規格進行網站開發，絕對要來這個網站查詢瀏覽器支援度。( **註**: 該網站的網址很好記: **cani**use.com )
-   [HTML5 & CSS3 Support](https://html5test.com/)  
    **說明:**  
    這是一個比較摘要的支援度查表，沒有比 **cani**use.com 來的完整，但網頁比較漂亮，且因為資訊較少，所以看得比較快。
-   [The HTML5 test - How well does your browser support HTML5?](http://html5test.com/)  
    **說明:**  
    這是一個專門用來測試各瀏覽器 HTML5 支援度的線上工具，連上該網站之後就會立刻展開測試，並告訴你「目前」這個瀏覽器到底支援多少 HTML5 能力。不過，因為 HTML5 是一份尚未發布公告標準的規格，所以分數僅供參考，仔細看看你的網站想用的功能就好，不用費心去比較最後算出的**分數**。
-   [HTML5 Please - Use the new and shiny responsibly](http://html5please.com/)  
    **說明:**  
    HTML5 畢竟是新玩意，而且規格尚未公告標準，因此在使用上必須特別小心，尤其是使用者用**舊版瀏覽器**解讀這些 HTML5 提供的新元素與 JavaScript API 時，必定會發生問題。還好有大量的 [HTML5 Cross Browser Polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills) 可以讓舊版瀏覽器支援各種瀏覽器中原本不支援的能力，但這些 Polyfills 種類繁多，難以選擇，還好有 [HTML5 Please](http://html5please.com/) 網站整理出哪些能用、哪些不能用、哪些使用的時候有甚麼注意事項，是個值得參考的資訊來源。
-   [Mobile HTML5 compatibility on iPhone, Android, Windows Phone, BlackBerry, Firefox OS and other mobile devices](http://mobilehtml5.org/)  
    **說明:**  
    行動裝置日益普及，因此當你的網頁需要在各行動裝置內建的瀏覽器執行時，自然也會遇到各種奇異的相容性問題，在這個網站你可以查到各種 HTML5 規格在各種行動裝置瀏覽器的支援程度。  
    你知道的，開發行動版網站也是一門苦差事，要吃網站建置這行飯，就必須承擔這種苦，不要抱怨了，認真看吧! ^^  
    記得，你不會用到所有 HTML5 規格，只要看你要用的那些規格的支援度，以及那些你要支援的行動裝置即可，無須給自己太大壓力！當然，大公司、大網站，需要面對的行動裝置與各瀏覽器就更多，挑戰自然會更大。

**跨瀏覽器測試工具**

-   [modern.IE](http://www.modern.ie/)  
    Internet Explorer 的測試更簡單
-   [IETester](http://www.my-debugbar.com/wiki/IETester/HomePage)  
    Browser Compatibility Check for Internet Explorer Versions from 5.5 to 10
-   [BrowserStack](http://www.browserstack.com/)  
    Cross Browser Testing Tool. 200+ Browsers, Mobile, Real IE.
-   [Browsershots](https://web.archive.org/web/20250409114943/http://browsershots.org/)  
    Check Browser Compatibility, Cross Platform Browser Test -
-   [Lunascape](https://web.archive.org/web/20250612173918/https://www.lunascape.tv/)  
    simple easy to use multi-featured web browser
-   [Cross Browser Testing](https://smartbear.com/product/bitbar/)  
    Pick an OS - Pick a Browser - Test website
-   [Expression Web SuperPreview](http://msdn.microsoft.com/en-us/expression/)

**※ 徵求好站連結 **※  
******如果你有更多優質的網站或文章，歡迎隨時留言給我，我好整理在這篇文章裡，供大家參考。**