什么是 CSS hack？
由于不同廠商的流覽器或某瀏覽器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等）框沟，對(duì)CSS的支持、解析不一樣，導(dǎo)致在不同瀏覽器的環(huán)境中呈現(xiàn)出不一致的頁(yè)面展現(xiàn)效果桨啃。這時(shí)，為了獲得統(tǒng)一的頁(yè)面效果檬输，就需要針對(duì)不同的瀏覽器或不同版本寫特定的CSS樣式照瘾，把這個(gè)針對(duì)不同的瀏覽器/不同版本寫相應(yīng)的CSS code的過(guò)程，叫做CSS hack丧慈。其原理是由于不同的瀏覽器和瀏覽器各版本對(duì)CSS的支持及解析結(jié)果不一樣析命，以及CSS優(yōu)先級(jí)對(duì)瀏覽器展現(xiàn)效果的影響，我們可以據(jù)此針對(duì)不同的瀏覽器情景來(lái)應(yīng)用不同的CSS逃默。CSS hack有3種表現(xiàn)形式鹃愤，CSS屬性前綴法、選擇器前綴法以及IE條件注釋法（即HTML頭部引用if IE）Hack完域，實(shí)際項(xiàng)目中CSS Hack大部分是針對(duì)IE瀏覽器不同版本之間的表現(xiàn)差異而引入的软吐。
a. 屬性前綴法(即類內(nèi)部Hack)：例如 IE6能識(shí)別下劃線"_"和星號(hào)" * "，IE7能識(shí)別星號(hào)" * "吟税，但不能識(shí)別下劃線""凹耙，IE6~IE10都認(rèn)識(shí)"\9"姿现，但Firefox前述三個(gè)都不認(rèn)識(shí)。
b. 選擇器前綴法(即選擇器Hack)
c. IE條件注釋法(即HTML條件注釋Hack)：針對(duì)所有IE(注：IE10+已經(jīng)不再支持條件注釋)： 肖抱，針對(duì)IE6及以下版本：备典。這類Hack不僅對(duì)CSS生效，對(duì)寫在判斷語(yǔ)句里面的所有代碼都會(huì)生效
處理瀏覽器兼容問(wèn)題的思路
（1）要不要做：產(chǎn)品的角度（產(chǎn)品的受眾人群虐沥，受眾的瀏覽器比例熊经，效果優(yōu)先還是功能優(yōu)先），是否有必要為小部分人群兼容欲险；成本的角度（有沒有必要做某件事情）
（2）做到什么程度：要讓哪些瀏覽器支持哪些效果镐依；
（3）如何做：
a. 根據(jù)兼容需求選擇兼容技術(shù)框架\庫(kù)和兼容工具（JQuery,css reset,normalizr,respond.js ,html5shiv)
b. 使用條件注釋，css hack天试，js能力檢測(cè)做一些修補(bǔ)
列舉5種以上瀏覽器兼容的寫法
html5shiv.js讓IE等瀏覽器支持HTML5槐壳。
條件注釋法
| 項(xiàng)目 | 范例 | 說(shuō)明 |
|---|---|---|
| ！ | [if !IE] | 非IE |
| It | [if It IE 5.5] | 小于IE5.5 |
| Ite | [if Ite IE 6] | 小于等于IE6 |
| gt | [if gt IE 5] | 大于 IE5 |
| gte | [if gte IE7] | 大于等于IE7 |
| I | [if(IE6)I(IE7)] | IE6或者IE7 |
- 選擇器前綴法
*html *前綴只對(duì)IE6生效
*+html *+前綴只對(duì)IE7生效
@media screen\9{...}只對(duì)IE6/7生效
@media \0screen {body { background: red; }}只對(duì)IE8有效
@media \0screen\,screen\9{body { background: blue; }}只對(duì)IE6/7/8有效
@media screen\0 {body { background: green; }} 只對(duì)IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只對(duì)IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對(duì)IE10有效
- 屬性前綴法
.box{
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie67*/
color: yellow\9; /*ie/edge 6-8*/
}
- 使用Modernizr喜每。Modernizr運(yùn)行時(shí)會(huì)在html元素上添加一批CSS的class名稱务唐，這些class名稱標(biāo)記當(dāng)前瀏覽器支持哪些特性和不支持哪些特性，支持的特性就直接使用該特性的名稱作為一個(gè)class带兜，不支持的特性顯示的class是“no-特性名稱”枫笛。
可以直接使用Modernizr在元素里生成的class名稱，在你的css文件里定義相應(yīng)的屬性以便支持當(dāng)前瀏覽器
以下工具/名詞是做什么的
條件注釋：HTML源碼中被IE有條件解釋的語(yǔ)句刚照。條件注釋可被用來(lái)向IE提供及隱藏代碼刑巧。
IE Hack：使用特殊的符號(hào)或者方式寫出只有IE瀏覽器可以解析的代碼，如CSS屬性前綴法无畔、選擇器前綴法以及IE條件注釋法
js 能力檢測(cè)：能力檢測(cè)的目標(biāo)是識(shí)別瀏覽器的能力啊楚。使用這種方式無(wú)需顧及瀏覽器如何如何，只需確定瀏覽器是否支持特定的能力浑彰，就可以給出相關(guān)的方案恭理。
html5shiv.js：解決一些瀏覽器不支持html5的一些新特性和標(biāo)簽的問(wèn)題。
respond.js：解決在做響應(yīng)式網(wǎng)頁(yè)的時(shí)候一些瀏覽器不支持媒體查詢的問(wèn)題郭变。
css reset：重新定義樣式屬性颜价，將瀏覽器默認(rèn)樣式覆蓋掉。
normalize.css：保護(hù)有用的瀏覽器默認(rèn)樣式而不是完全去掉它們诉濒，修復(fù)瀏覽器自身的bug并保證各瀏覽器的一致性周伦，用一些小技巧優(yōu)化CSS可用性。相比于傳統(tǒng)的CSS reset循诉，Normalize.css是一種現(xiàn)代的横辆、為HTML5準(zhǔn)備的優(yōu)質(zhì)替代方案撇他。
Modernizr：Modernizr會(huì)在頁(yè)面加載時(shí)自動(dòng)檢測(cè)瀏覽器的特性茄猫，并html元素上添加一批CSS的class名稱狈蚤，這些class名稱標(biāo)記當(dāng)前瀏覽器支持哪些特性和不支持哪些特性。
postCSS：postCSS是一款通過(guò)JS插件來(lái)轉(zhuǎn)換CSS的工具划纽。這些插件能幫你校驗(yàn)?zāi)愕腃SS代碼脆侮、轉(zhuǎn)換未來(lái)的CSS語(yǔ)法、支持變量和混寫勇劣、以及內(nèi)聯(lián)圖片等等靖避。
