1. 什么是 CSS hack
由于不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對CSS的解析認識不完全一樣，因此會導致生成的頁面效果不一樣，得不到我們所需要的頁面效果。
這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能在不同的瀏覽器中也能得到我們想要的頁面效果。
-
簡單的說，CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器。當然，我們也可以反過來利用CSS hack為不同版本的瀏覽器定制編寫不同的CSS效果。
-
CSS Hack的3種表現形式：CSS屬性前綴法、選擇器前綴法以及IE條件注釋法（即HTML頭部引用if IE）Hack，實際項目中CSS Hack大部分是針對IE瀏覽器不同版本之間的表現差異而引入的。
- 屬性前綴法(即類內部Hack)：例如 IE6能識別下劃線""和星號" * "，IE7能識別星號" * "，但不能識別下劃線""，IE6~IE10都認識"\9"，但firefox前述三個都不能認識。
- 選擇器前綴法(即選擇器Hack)。
- IE條件注釋法(即HTML條件注釋Hack)：針對所有IE(注：IE10+已經不再支持條件注釋)： ；針對IE6及以下版本：。
這類Hack不僅對CSS生效，對寫在判斷語句里面的所有代碼都會生效。
2. 瀏覽器兼容的思路
什么是瀏覽器兼容問題
同一份代碼，有的瀏覽器渲染效果正常，有的不正常。
- 不正常的原因是什么？(不支持? bug？)
- 如何讓它展示正常?(條件注釋？ 單獨Hack？)
為什么會有瀏覽器兼容問題
- 同一產品，版本越老 bug 越多
- 同一產品，版本越新，功能越多
- 不同產品，不同標準，不同實現方式
處理兼容問題的思路:
- 要不要做
產品的角度（產品的受眾、受眾的瀏覽器比例、效果優先還是基本功能優先）
成本的角度 (有無必要做某件事)
- 做到什么程度
讓哪些瀏覽器支持哪些效果
- 如何做
根據兼容需求選擇技術框架/庫(jQuery)，比如：Bootstrap (>=ie8)、jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)、Vue (>= ie9)
根據兼容需求選擇兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
postCSS
條件注釋、CSS Hack、js 能力檢測做一些修補
漸進增強(progressive enhancement): 針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優雅降級 (graceful degradation): 一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。
3. 列舉5種以上瀏覽器兼容的寫法
- 條件注釋
<!--[if IE 7]><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]-->
| 項目 | 范例 | 說明 | ||
|---|---|---|---|---|
| ! | [if !IE] | 非IE | ||
| lt | [if lt IE 5.5] | 小于IE 5.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 |
- 屬性前綴
.box{
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie67*/
color: yellow\9; /*ie/edge 6-8*/
}
常見屬性的兼容情況
| 屬性 | 瀏覽器版本 |
|---|---|
| inline-block | >=ie8 |
| min-width/min-height | >=ie8 |
| :before,:after | >=ie8 |
| div:hover | >=ie7 |
| background-size | >=ie9 |
| 圓角 | >=ie9 |
| 陰影 | >=ie9 |
| 動畫/漸變 | >=ie10 |
選擇器前綴
*html*前綴只對IE6生效
*+html*+前綴只對IE7生效
@media screen\9{...}只對IE6/7生效
@media \0screen {body { background: red; }}只對IE8有效
@media \0screen\,screen\9{body { background: blue; }}只對IE6/7/8有效
@media screen\0 {body { background: green; }}只對IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }}只對IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }}只對IE10有效等等條件注釋結合類選擇器整體優化
<!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]-->
- 利用Modernizr工具
運行的時候它會在html元素上添加一批CSS的class名稱，這些class名稱標記當前瀏覽器支持哪些特性和不支持哪些特性，支持的特性就直接顯示該特性的名稱作為一個class（例:canvas,websockets），不支持的特性顯示的class是“no-特性名稱”。以下是IE9下生成的特征類型。
<html class=" js no-flexbox canvas canvastext no-webgl no-touch geolocation
postmessage no-websqldatabase no-indexeddb hashchange no-history
draganddrop no-websockets rgba hsla multiplebgs backgroundsize
no-borderimage borderradius boxshadow no-textshadow opacity
no-cssanimations no-csscolumns no-cssgradients no-cssreflections
csstransforms no-csstransforms3d no-csstransitions fontface
generatedcontent video audio localstorage sessionstorage
no-webworkers no-applicationcache svg inlinesvg smil svgclippaths">
可以直接使用Modernizr在元素里生成的class名稱，在你的css文件里定義相應的屬性以便支持當前瀏覽器。例如，下面的代碼可以屬性，在支持shadow陰影的瀏覽器顯示shadow，不支持的瀏覽器顯示標準的邊框：
.boxshadow #MyContainer {
border: none;
-webkit-box-shadow: #666 1px 1px 1px;
-moz-box-shadow: #666 1px 1px 1px;
}
.no-boxshadow #MyContainer {
border: 2px solid black;
}
4. 以下工具/名詞是做什么的?
條件注釋
條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼。
條件注釋最初于微軟的 Internet Explorer 5瀏覽器中出現，并且直至 Internet Explorer 9 均支持。微軟已宣布于IE10停止支持。IE Hack
針對IE瀏覽器編寫不同的CSS的讓IE能夠正常渲染的過程。js 能力檢測
使用JS的語法檢測瀏覽器支持的屬性，以便展示效果。html5shiv.js
用于解決IE9以下版本瀏覽器對HTML5新增標簽不識別，并導致CSS不起作用的問題。所以我們在使用過程中，想要讓低版本的瀏覽器，即IE9以下的瀏覽器支持，那么這款html5shiv.js是一個非常好的選擇！respond.js
Respond.js 是一個小腳本，用于為 IE6-8 以及其它不支持 CSS3 媒體查詢功能的瀏覽器提供媒體查詢的 min-width 和 max-width 特性，實現響應式網頁設計。css reset
將瀏覽器的默認樣式全部去掉，更準確說就是通過重新定義標簽樣式，“覆蓋”瀏覽器的CSS默認屬性。normalize.css
Normalize.css 只是一個很小的CSS文件，但它在默認的HTML元素樣式上提供了跨瀏覽器的高度一致性。相比于傳統的CSS reset，Normalize.css是一種現代的、為HTML5準備的優質替代方案。Normalize.css 是一個可以定制的CSS文件，它讓不同的瀏覽器在渲染網頁元素的時候形式更統一。
它可以：
保留有用的默認值，不同于許多 CSS reset 的簡單粗暴全部抹掉。
標準化的樣式，適用范圍廣的元素。
糾正錯誤和常見的瀏覽器的不一致性。
一些細微的改進，提高了易用性。
使用詳細的注釋來解釋代碼。
Modernizr
Modernizr是一個 JavaScript 庫，用于檢測用戶瀏覽器的 HTML5 與 CSS3 特性。
Modernizr 使你可以方便地為各種情況編寫 JavaScript 和 CSS，無論瀏覽器是否支持這些特性。這是處理漸進增強的完美方案。
Modernizr 會在頁面加載后立即檢測特性；然后創建一個包含檢測結果的 JavaScript 對象，同時在 html 元素加入方便你調整 CSS 的 class 名。postCSS
它可以被理解為一個平臺，可以讓一些插件在上面跑，它提供了一個解析器，可以將CSS解析成抽象語法樹，通過PostCSS這個平臺，我們能夠開發一些插件，來處理CSS。熱門插件如autoprefixer，它可以幫我們處理兼容問題，只需正常寫CSS，autoprefixer可以幫我們自動生成兼容性代碼。
5. 一般在哪個網站查詢屬性兼容性？
查詢CSS屬性兼容性 : http://caniuse.com/
