（17）番外篇——① 瀏覽器兼容

08-16

（17）番外篇——① 瀏覽器兼容

來自專欄 Oli的前端一萬小時

本知識學慣用時：2小時，總第73/10000小時

前言：什麼是瀏覽器兼容問題？同一份代碼，有的瀏覽器效果正常，有的不正常。其實最主要就是對 IE 瀏覽器的兼容問題。可以大致分為：
A 級兼容(chrome、firefox、IE9+)：要保證在最新瀏覽器上完美實現設計稿；
B 級兼容(ie8)：能用且差別不大；
C 級兼容(ie7 以下)：能用。

一、處理兼容問題的思路

首先以最大程度完善設計稿為基礎，再考慮兼容性，不能盲目為了兼容問題而棄用方便簡潔的新方法（如 html5、css3）；當然也不能用過新的技術方法使得兼容性過於低、實用性差。

??漸進增強和優雅降級：

-- 漸進增強(progressive enhancement)：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗

-- 優雅降級 (graceful degradation)：一開始就構建完整的功能，然後再針對低版本瀏覽器進行兼容。

??區別：優雅降級是從複雜的現狀開始，並試圖減少用戶體驗的供給，而漸進增強則是從一個非常基礎的，能夠起作用的版本開始，並不斷擴充，以適應未來環境的需要。降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處於安全地帶。

① 要不要做？

-- 產品的角度（產品的受眾、受眾的瀏覽器比例、效果優先還是基本功能優先）

-- 成本的角度 (有無必要做某件事)

② 做到什麼程度？

-- 讓哪些瀏覽器支持哪些效果

③ 如何做？（現階段的前端工作，90%都不需要去管 IE8 以下的兼容問題，工作重心最主要還是集中在 JS ，對於瀏覽器兼容不需要花太多精力，理解相關的解決思路就好了。）

-- 根據兼容需求選擇技術框架/庫--用的時候留一個心眼就行：

- Bootstrap (>=ie8)

- jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)

- Vue (>= ie9)

- ...

-- 根據兼容需求選擇兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)

-- postCSS

-- 一些老的技術手段，如：條件注釋（處理 IE 的方式）、CSS Hack、js 能力檢測做一些修補

③-1 條件注釋

條件注釋 (conditional comment) 是於HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼。

項目：範例：說明：! [if !IE] 非IElt [if lt IE 5.5] 小於IE 5.5lte [if lte IE 6] 小於等於IE6gt [if gt IE 5] 大於IE5gte [if gte IE 7] 大於等於IE7 [if (IE 6)(IE 7)] IE6或者IE7

例：

<script>alert(1);</script>

??使用了條件注釋的頁面在 Windows Internet Explorer 9 中可正常工作，但在 Internet Explorer 10 中無法正常工作， IE10 不再支持條件注釋。)

③-2 CSS hack

（用一些奇怪的手段達到兼容的方式！）

由於不同廠商的瀏覽器，比如 Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本，如 IE6 和 IE7，對 CSS 的解析認識不完全一樣，因此會導致生成的頁面效果不一樣，得不到我們所需要的頁面效果。

這個時候我們就需要針對不同的瀏覽器去寫不同的 CSS，讓它能在不同的瀏覽器中也能得到我們想要的頁面效果。

常見hack寫法：

?? browserhacks.com 查 Hack 的寫法

.box { color: red; _color: blue; /*ie6 下它生效*/ *color: pink; /*ie67 下它生效*/ color: yellow9; /*ie/edge 6-8 下它生效*/}<!–-[if IE 7]><link rel="stylesheet" href="ie7.css" type="text/css" /><![endif]–->

二、常見屬性的兼容情況

inline-block >=ie8min-width/min-height >=ie8::before, ::after >=ie8div:hover >=ie7inline-block >=ie8background-size >=ie9圓角 >=ie9陰影 >=ie9動畫/漸變 >=ie10

?? caniuse.com 查CSS屬性兼容

三、常見兼容處理範例

①

.clearfix:after { content: ; display: block; clear: both;}.clearfix { *zoom: 1; /* 僅對ie67有效 */}

②

.target{ display: inline-block; *display: inline; *zoom: 1;}

③

④

<!DOCTYPE html><html dir="ltr" lang="en-US" class="no-js">

四、一些處理兼容的工具總結

1. 條件注釋

條件注釋 (conditional comment) 是於 HTML 源碼中被IE有條件解釋的語句。條件注釋可被用來向 IE 提供及隱藏代碼。

條件注釋最初於微軟的 Internet Explorer 5 瀏覽器中出現，並且直至 Internet Explorer 9 均支持。微軟已宣佈於 IE10 停止支持。

2. IE Hack

針對 IE 瀏覽器編寫不同的 CSS 的讓 IE 能夠正常渲染的過程。

3. js 能力檢測

使用 JS 的語法檢測瀏覽器支持的屬性，以便展示效果。

4. html5shiv.js

用於解決 IE9 以下版本瀏覽器對 HTML5 新增標籤不識別，並導致 CSS 不起作用的問題。所以我們在使用過程中，想要讓低版本的瀏覽器，即 IE9 以下的瀏覽器支持，那麼這款 html5shiv.js 是一個非常好的選擇！

5. respond.js

Respond.js 是一個小腳本，用於為 IE6-8 以及其它不支持 CSS3 媒體查詢功能的瀏覽器提供媒體查詢的 min-width 和 max-width 特性，實現響應式網頁設計。

6. css reset

將瀏覽器的默認樣式全部去掉，更準確說就是通過重新定義標籤樣式，「覆蓋」瀏覽器的 CSS 默認屬性。

7. normalize.css

Normalize.css 只是一個很小的 CSS 文件，但它在默認的 HTML 元素樣式上提供了跨瀏覽器的高度一致性。相比於傳統的 CSS reset，Normalize.css 是一種現代的、為 HTML5 準備的優質替代方案。Normalize.css 是一個可以定製的 CSS 文件，它讓不同的瀏覽器在渲染網頁元素的時候形式更統一。

它可以：

· 保留有用的默認值，不同於許多 CSS reset 的簡單粗暴全部抹掉；

· 標準化的樣式，適用範圍廣的元素；

· 糾正錯誤和常見的瀏覽器的不一致性；

· 一些細微的改進，提高了易用性；

· 使用詳細的注釋來解釋代碼。

8. Modernizr

Modernizr 是一個 JavaScript 庫，用於檢測用戶瀏覽器的 HTML5 與 CSS3 特性。

Modernizr 使你可以方便地為各種情況編寫 JavaScript 和 CSS，無論瀏覽器是否支持這些特性。這是處理漸進增強的完美方案。

Modernizr 會在頁面載入後立即檢測特性，然後創建一個包含檢測結果的 JavaScript 對象，同時在 html 元素加入方便你調整 CSS 的 class 名。

9. postCSS

它可以被理解為一個平台，可以讓一些插件在上面跑，它提供了一個解析器，可以將 CSS 解析成抽象語法樹，通過 PostCSS 這個平台，我們能夠開發一些插件來處理 CSS。熱門插件如 autoprefixer，它可以幫我們處理兼容問題，只需正常寫 CSS，autoprefixer 可以幫我們自動生成兼容性代碼。

後記：對於瀏覽器兼容我們主要還是理解這個處理思路，熟悉一些範例，然後在實際寫頁面的過程中有選擇的去復用即可。

歡迎繼續關注下文：

（18）番外篇——② 編碼規範

（本文版權歸「Oli的前端一萬小時」所有，轉載需說明來源）