原創：itsOli @前端一萬小時
本文首發於公眾號「前端一萬小時」
本文版權歸作者所有，未經授權，請勿轉載！
本文節選自“語雀”私有付費專欄「前端一萬小時 | 從零基礎到輕鬆就業」
複製程式碼
1. 漸進增強和優雅降級分別是什麼意思？
2. 什麼是 CSS Hack？在哪個網站檢視標籤（屬性）的瀏覽器相容情況？
3. IE6、7 的 Hack 寫法是？
4. 儘可能多的列舉瀏覽器相容的處理範例？
5. CSS Reset 是什麼？CSS 預編譯器是什麼？後編譯器（PostCSS）是什麼？
6. CSS Reset 和 Normalize.css 有什麼區別？
7. 儘可能多的寫出瀏覽器相容性問題？
8. 如何讓 Chrome 瀏覽器顯示小於 12px 的文字？
9. CSS 前處理器的比較：Less、Sass？
10. 常見相容性問題？
複製程式碼?上方面試題“參考答案詳解”，請點選此處檢視獲取方式！
前言： 什麼是瀏覽器相容問題？同一份程式碼，有的瀏覽器效果正常，有的不正常。
其實最主要就是對 IE 瀏覽器的相容問題，可以大致分為：
- A 級相容（Chrome、Firefox、IE9+）：要保證在最新瀏覽器上完美實現設計稿；
- B 級相容（IE8）：能用且差別不大；
- C 級相容（IE7 以下）：能用。
1 處理相容問題的思路
首先以最大程度完善設計稿為基礎，再考慮相容性，不能盲目為了相容問題而棄用方便簡潔的新方法（如 HTML5、CSS3）；當然也不能用過新的技術方法使得相容性過於低、實用性差。
漸進增強和優雅降級
1.1 漸進增強（Progressive enhancement）
針對低版本瀏覽器進行構建頁面，保證最基本的功能，然後再針對高階瀏覽器進行效果、互動等改進和追加功能達到更好的使用者體驗。
1.2 優雅降級（Graceful degradation）
一開始就構建完整的功能，然後再針對低版本瀏覽器進行相容。
1.3 區別
- 優雅降級是從複雜的現狀開始，並試圖減少使用者體驗的供給；而漸進增強則是從一個非常基礎的，能夠起作用的版本開始，並不斷擴充，以適應未來環境的需要。
- 降級（功能衰減）意味著往回看，而漸進增強則意味著朝前看，同時保證其根基處於安全地帶。
1.3.1 要不要做
- 產品的角度（產品的受眾、受眾的瀏覽器比例、效果優先還是基本功能優先）
- 成本的角度（有無必要做某件事）
1.3.2 做到什麼程度
- 讓哪些瀏覽器支援哪些效果。
1.3.3 如何做
（現階段的前端工作，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.4 條件註釋
條件註釋（conditional comment）是 HTML 原始碼中被 IE 有條件解釋的語句。條件註釋可被用來向 IE 提供及隱藏程式碼。
| 專案 | 範例 | 說明 |
|---|---|---|
| ! | [if !IE] | 非 IE |
| lt | [if lt IE 5.5] | 小於 IE5.5 |
| lte | [if lte IE 6] | 小於等於 IE6 |
| gt | [if gt IE 5] | 大於 IE5 |
| gte | [if gte IE 7] | 大於等於 IE7 |
| \ | [if (IE 6)(IE 7)] | IE6 或者 IE7 |
例：
<!--[if IE 6]>
<p>You are using Internet Explorer 6.</p>
<![endif]-->
<!--[if !IE]><!-->
<script>alert(1);</script>
<!--<![endif]-->
<!--[if IE 8]>
<link href="ie8only.css" rel="stylesheet">
<![endif]-->
複製程式碼❗️使用了條件註釋的頁面在 Windows Internet Explorer 9 中可正常工作，但在 Internet Explorer 10 中無法正常工作， IE10 不再支援條件註釋。
1.5 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: yellow\9; /* IE/Edge 6-8 下它生效 */
}
<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
複製程式碼2 常見屬性的相容情況
| 屬性名 | 相容性 |
|---|---|
| inline-block | >=IE8 |
| min-width/min-height | >=IE8 |
| ::before/::after | >=IE8 |
| div:hover | >=IE7 |
| inline-block | >=IE8 |
| background-size | >=IE9 |
| 圓角 | >=IE9 |
| 陰影 | >=IE9 |
| 動畫/漸變 | >=IE10 |
（? caniuse.com 查 CSS 屬性相容）
3 常見相容處理範例
.clearfix:after {
content: "";
display: block;
clear: both;
}
.clearfix {
*zoom: 1; /* 僅對 IE67 有效 */
}
複製程式碼.target {
display: inline-block;
*display: inline;
*zoom: 1;
}
複製程式碼<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
複製程式碼<!DOCTYPE html>
<!--[if IEMobile 7 ]> <html dir="ltr" lang="en-US"class="no-js iem7"> <![endif]-->
<!--[if lt IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie6 oldie"> <![endif]-->
<!--[if IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie7 oldie"> <![endif]-->
<!--[if IE 8 ]> <html dir="ltr" lang="en-US" class="no-js ie8 oldie"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html dir="ltr" lang="en-US" class="no-js"><!--<![endif]-->
複製程式碼4 一些處理相容的工具總結
4.1 條件註釋
條件註釋（conditional comment）是於 HTML 原始碼中被 IE 有條件解釋的語句。條件註釋可被用來向 IE 提供及隱藏程式碼。
條件註釋最初於微軟的 Internet Explorer 5 瀏覽器中出現，並且直至 Internet Explorer 9 均支援。微軟已宣佈於 IE10 停止支援。
4.2 IE Hack
針對 IE 瀏覽器編寫不同的 CSS 的讓 IE 能夠正常渲染的過程。
4.3 JS 能力檢測
使用 JS 的語法檢測瀏覽器支援的屬性，以便展示效果。
4.4 html5shiv.js
用於解決 IE9 以下版本瀏覽器對 HTML5 新增標籤不識別，並導致 CSS 不起作用的問題。所以我們在使用過程中，想要讓低版本的瀏覽器，即 IE9 以下的瀏覽器支援，那麼這款 html5shiv.js 是一個非常好的選擇！
4.5 Respond.js
Respond.js 是一個小指令碼，用於為 IE6-8 以及其他不支援 CSS3 媒體查詢功能的瀏覽器提供媒體查詢的 min-width 和 max-width 特性，實現響應式網頁設計。
4.6 CSS Reset
將瀏覽器的預設樣式全部去掉，更準確說就是通過重新定義標籤樣式，“覆蓋”瀏覽器的 CSS 預設屬性。
4.7 Normalize.css
Normalize.css 只是一個很小的 CSS 檔案，但它在預設的 HTML 元素樣式上提供了跨瀏覽器的高度一致性。相比於傳統的 CSS Reset，Normalize.css 是一種現代的、為 HTML5 準備的優質替代方案。Normalize.css 是一個可以定製的 CSS 檔案，它讓不同的瀏覽器在渲染網頁元素的時候形式更統一。
?它可以：
- 保留有用的預設值，不同於許多 CSS Reset 的簡單粗暴全部抹掉；
- 標準化的樣式，適用範圍廣的元素；
- 糾正錯誤和常見的瀏覽器的不一致性；
- 一些細微的改進，提高了易用性；
- 使用詳細的註釋來解釋程式碼。
4.8 Modernizr
Modernizr 是一個 JavaScript 庫，用於檢測使用者瀏覽器的 HTML5 與 CSS3 特性。
Modernizr 使你可以方便地為各種情況編寫 JavaScript 和 CSS，無論瀏覽器是否支援這些特性。這是處理漸進增強的完美方案。
Modernizr 會在頁面載入後立即檢測特性，然後建立一個包含檢測結果的 JavaScript 物件，同時在 HTML 元素加入方便你調整 CSS 的 class 名。
（?❗️以下知識點我們會在“前端綜合”裡邊專門用一篇文章來講解，目前我們先熟悉相關概念，不必深究！）
4.9 後編譯 PostCSS
它提供了一種方式用 JavaScript 程式碼來處理 CSS。它負責把 CSS 程式碼解析成抽象語法樹結構（Abstract Syntax Tree，AST），再交由外掛來進行處理。
外掛基於 CSS 程式碼的 AST 所能進行的操作是多種多樣的，比如可以支援變數和混入（mixin），增加瀏覽器相關的宣告字首，或是把使用將來的 CSS 規範的樣式規則轉譯（transpile）成當前的 CSS 規範支援的格式。
?簡單來說： 它可以被理解為一個平臺，可以讓一些外掛在上面跑，它提供了一個解析器，可以將 CSS 解析成抽象語法樹。
通過 PostCSS 這個平臺，我們能夠開發一些外掛來處理 CSS。熱門外掛如 Autoprefixer，它可以幫我們處理相容問題，只需正常寫 CSS，Autoprefixer 可以幫我們自動生成相容性程式碼。
?與 PostCSS 相關的知識點：“CSS 預編譯器”——預編譯器的作用是增強了 CSS 語法，讓我們可以在 CSS 中使用變數、迴圈、巢狀等功能，主要代表是 Less、Sass、Stylus，它們本質上就是一種編譯器。
後記： 對於瀏覽器相容我們主要還是理解這個處理思路，熟悉一些範例，然後在實際寫頁面的過程中有選擇的去複用即可。
祝好，qdywxs ♥ you！