什么是 CSS hack？
CSS hank由于不同廠商的瀏覽器，比如IE,Safari，Chrome等，或者同一廠商的瀏覽器的不同版本，如IE6和IE7，對CSS的解析不完全一樣，因此就會使得生成的頁面效果不一樣。這個時候就需要針對不同的瀏覽器去寫不同的CSS，讓他能夠同時兼容不同的瀏覽器，在瀏覽器中的效果一致；簡單的說，
CSS hank的母的就是使你的CSS代碼兼容不同的瀏覽器。也可以反過來利用CSS hack為不同版本的瀏覽器定制編寫不同的CSS效果。
CSS hank大致有3種表現形式
- CSS類內部hank 比如 IE6能識別下劃線""和星號""，IE7能識別星號""，但不能識別下劃線""，而firefox兩個都不能認識。等等
- 選擇器hank 比如 IE6能識別html .class{}，IE7能識別+html .class{}或者*:first-child+html .class{}。等等
- HTML頭部引用（if IE）hank 針對所有IE：<![endif]-->，針對IE6及以下版本：<![endif]-->，這類Hack不僅對CSS生效，對寫在判斷語句里面的所有代碼都會生效。
常用的CSS hack方式
（1）方式一 條件注釋法
只在IE下生效
只在IE6下生效
只在IE6以上版本生效
只在IE8上不生效
非IE瀏覽器生效
（2）方式二 類內屬性前綴法
屬性前綴法是在CSS樣式屬性名前加上一些只有特定瀏覽器才能識別的hack前綴，以達到預期的頁面展現效果。
IE瀏覽器各版本 CSS hack 對照表
| hack | 寫法 | 實例 | IE6(S) | IE6(Q) | IE7(S) | IE7(Q) | IE8(S) | IE8(Q) | IE9(S) | IE9(Q) | IE10(S) | IE10(Q) |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| * | *color | 青色 | Y | Y | Y | Y | N | Y | N | Y | N | Y |
| + | +color | 綠色 | Y | Y | Y | Y | N | Y | N | Y | N | Y |
| - | -color | 黃色 | Y | Y | N | N | N | N | N | N | N | N |
| _ | _color | 藍色 | Y | Y | N | Y | N | Y | N | Y | N | N |
| # | #color | 紫色 | Y | Y | Y | Y | N | Y | N | Y | N | Y |
| \0 | color:red\0 | 紅色 | N | N | N | N | Y | N | Y | N | Y | N |
| \9\0 | color:red\9\0 | 粉色 | N | N | N | N | N | N | Y | N | Y | N |
| !important | color:blue !important;color:green; | 棕色 | N | N | Y | N | Y | N | Y | N | Y | Y |
說明：在標準模式中
“-″減號是IE6專有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
“\9\0″ 只對IE9/IE10生效，是IE9/10的hack
（3）CSS hack方式三：選擇器前綴法
選擇器前綴法是針對一些頁面表現不一致或者需要特殊對待的瀏覽器，在CSS選擇器前加上一些只有某些特定瀏覽器才能識別的前綴進行hack。
目前最常見的是
*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有效等等
談一談瀏覽器兼容的思路
- 要不要做
- 產品的角度（產品的受眾、受眾的瀏覽器比例、效果優先還是基本功能優先）
- 成本的角度 (有無必要做某件事)
- 做到什么程度
- 讓哪些瀏覽器支持哪些效果
- 如何做
- 根據兼容需求選擇技術框架/庫(jquery)
- 根據兼容需求選擇兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
- postCSS
- 條件注釋、CSS Hack、js 能力檢測做一些修補
列舉5種以上瀏覽器兼容的寫法
- *， ie6,ie7可以識別；
_和- ， ie6可以識別； - !important ,表示高優先級，ie7及以上，firefox都支持，ie6認識帶!important的樣式屬性，但不認識!important的優先級；
- -webkit- ，針對safari，chrome瀏覽器的內核CSS寫法
- -moz-，針對firefox瀏覽器的內核CSS寫法
- -ms-，針對ie內核的CSS寫法
- -o-，針對Opera內核的CSS寫法
- CSS里可以給屬性或者選擇器寫hack。屬性例如：background:blue;_background:red;選擇器例如： html #demo {width:120px;} *+html #demo {width:130px;}
- HTML 針對所有IE
<!–-[if IE 7]><link rel="stylesheet" href="ie7.css" type="text/css" /><![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*/
}
選擇器前綴法
*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，不支持的瀏覽器顯示標準的邊框：
```sh
.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;
}
以下工具/名詞是做什么的
- 條件注釋：條件注釋 是于HTML源碼中被 IE 有條件解釋的語句。條件注釋可被用來向 IE提供及隱藏代碼。 條件注釋最初于微軟的 Internet Explorer 5瀏覽器中出現，并且直至 Internet Explorer 9 均支持。微軟已宣布于IE10停止支持。
- IE Hack：針對IE瀏覽器編寫不同的CSS的讓IE能夠正常渲染的過程
- js 能力檢測：瀏覽器的能力檢測目標不是檢測特定的瀏覽器，而是檢測瀏覽器的能力。這樣，只需要檢測瀏覽器是否支持特定的能力，就可以給出特定的解決方案。這一部分檢測是解決瀏覽器兼容問題的主要檢測。
- html5shiv.js：用于解決IE9以下版本瀏覽器對HTML5新增標簽不識別，并導致CSS不起作用的問題。所以我們在使用過程中，想要讓低版本的瀏覽器，即IE9以下的瀏覽器支持，那么這款html5shiv.js是一個非常好的選擇！
- respond.js：Respond.js 是一個小腳本，用于為 IE6-8 以及其它不支持 CSS3 媒體查詢功能的瀏覽器提供媒體查詢的 min-width 和 max-width 特性，實現響應式網頁設計。
- css reset：將瀏覽器的默認樣式全部去掉，更準確說就是通過重新定義標簽樣式。“覆蓋”瀏覽器的CSS默認屬性。最最簡單的說法就是把瀏覽器提供的默認樣式覆蓋掉！這就是CSS reset。
- normalize.css：Normalize.css 是一個可以定制的CSS文件，它讓不同的瀏覽器在渲染網頁元素的時候形式更統一。
它可以：保留有用的默認值，不同于許多 CSS reset的簡單粗暴。標準化的樣式，適用范圍廣的元素。
糾正錯誤和常見的瀏覽器的不一致性。
一些細微的改進，提高了易用性。
使用詳細的注釋來解釋代碼。 - Modernizr：Modernizr 使你可以方便地為各種情況編寫 JavaScript 和 CSS，無論瀏覽器是否支持這些特性。這是處理漸進增強的完美方案。
Modernizr 會在頁面加載后立即檢測特性；然后創建一個包含檢測結果的 JavaScript 對象，同時在 html 元素加入方便你調整 CSS 的 class 名。 - postCSS：它可以被理解為一個平臺，可以讓一些插件在上面跑，它提供了一個解析器，可以將CSS解析成抽象語法樹，通過PostCSS這個平臺，我們能夠開發一些插件，來處理CSS。熱門插件如autoprefixer，它可以幫我們處理兼容問題，只需正常寫CSS，autoprefixer可以幫我的自動生成兼容性代碼
一般在哪個網站查詢屬性兼容性？
caniuse.com
