css hack
含義
由于不同的瀏覽器，比如Internet Explorer6,Internet Explorer7,Firefox等或者同一廠商的不同版本，對CSS的解析認(rèn)識不一樣，因此會導(dǎo)致生成的頁面效果不一樣，得不到我們所需要的頁面效果，這個(gè)時(shí)候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能夠同時(shí)兼容不同的瀏覽器能在不同的瀏覽器中也能得到我們想要的頁面效果。針對不同的瀏覽器寫不同的css code的過程，就叫css hack。例如\9就是ie8的css hack。
實(shí)現(xiàn)原理
由于不同的瀏覽器對css的支持及解析結(jié)果不一樣，還由于css中的優(yōu)先級的關(guān)系我們就可以根據(jù)這個(gè)來針對不同的瀏覽器來寫不同的css。
表現(xiàn)形式
css屬性前綴法、選擇器前綴法，以及ie條件注釋法，實(shí)際項(xiàng)目中的css hack大部分是針對ie 瀏覽器不同版本之間的表現(xiàn)差異而引入的。
瀏覽器兼容的思路
- 要不要做
從產(chǎn)品的角度（產(chǎn)品受眾、受眾瀏覽器的比例、效果優(yōu)先還是基本功能優(yōu)先）
成本的角度 - 做到什么程度：兼容ie8還是兼容ie6/7
- 如何做
- 根據(jù)兼容需求選擇技術(shù)框架、庫
- 根據(jù)兼容需求選擇兼容工具（html5shiv.js/respond.js/css reset/normalize.css/modernizr）
- postcss
- 條件注釋
兼容的寫法
處理兼容問題的手段
- 合適的框架
Bootstrap(>=ie8)
jQuery1.~(>=ie6), jQuery 2.~(>=ie9)
vue(>=ie9)
- 條件注釋
<!--[if IE 6]>
<p>you are using Internet Explorer 6</p>
<! [end if]-->
- css hack
.box{
color:red;/*所有瀏覽器都支持*/
color:red !important/*Firefox IE7支持*/
_color:blue;/*ie6支持*/
*color:pink;/*ie6、7支持*/
color:yellow\9;/*ie/ edge 6-8*/
}
- 常見的兼容處理范例
.clearfix:after{
content:' ';
display:block;
clear:both;
}
.clearfix{
*zoom:1;/*僅對ie6/7有效*/
}
.target{
display:inline-block;
*display:inline;
*zoom:1;/*觸發(fā)haslayout，可以設(shè)置寬度、高度等*/
}
順序很重要，否則會出現(xiàn)無效值。
- 使用兼容工具
條件注釋
條件注釋是一種安全的區(qū)分ie 瀏覽器版本的語法且被認(rèn)為是取代針對ie css hack 的首選辦法。
條件注釋只能用于ie5以上。且ie10不再支持。
條件注釋的基本結(jié)構(gòu)和html的注釋是一樣的。因此，ie以外的瀏覽器將會把它們看做是普通的注釋而忽略它們。
ie將會根據(jù)if條件來判斷是否如解析普通的頁面內(nèi)容一樣解析注釋里的內(nèi)容。
條件注釋的應(yīng)用
<!--[if IE7]>
<!--如果IE瀏覽器是7，調(diào)用ie7.css樣式表-->
<link rel='stylesheet' type='text/css' href='ie7.css'>
<![endif]-->
這其中就區(qū)分了ie7瀏覽器對css 的執(zhí)行，達(dá)到兼容的目的。
常見的屬性
| 項(xiàng)目 | 范例 | 說明 |
|---|---|---|
| ！ | [if !IE] | 非IE |
| It | [if It IE5.5] | 小于IE5.5 |
| Ite | [if Ite IE 6] | 小于等于IE6 |
| gt | [if gt IE5] | 大于IE5 |
| gte | [if gte IE7] | 大于等于IE7 |
IE Hack
針對IE瀏覽器編寫不同的css能讓IE正常渲染的過程。
js能力檢測
瀏覽器的能力檢測目標(biāo)不是檢測特定的瀏覽器，而是檢測瀏覽器是否支持特定的能力就可以給出特定的解決方案，這一部分檢測是解決瀏覽器兼容問題的主要檢測。
html5shiv.js
用于解決ie9以下版本瀏覽器對html5新增標(biāo)簽不識別，并導(dǎo)致css不起作用的問題，所以我們在使用的過程中，想要讓低版本的瀏覽器，即IE9以下的瀏覽器支持，那么就用到了html5shivjs。
respond.js
讓不支持css3 Media Query的瀏覽器包括ie6-ie8等其他瀏覽器支持查詢。
css reset
重置css樣式，即將所有瀏覽器的自帶樣式重置掉，這樣更易于保持各個(gè)瀏覽器渲染的一致性。
缺點(diǎn)：
-
CSS文件的大小
顯然，css reset平白無故的增加了css文件的大小雖然，增加的大小可能有限，但是，即使0.1秒的載入時(shí)間也會影響互聯(lián)網(wǎng)的收入的。 -
樣式的重置
許多的css樣式要重寫與重新覆蓋，典型的多此一舉。 -
CSS的渲染
這可以說是很大的問題，樣式無緣無故增加了很多的渲染，想想看一個(gè)項(xiàng)目或者是一個(gè)頁面中有多少個(gè)div標(biāo)簽，居然使用div{margin:0;padding:0;},當(dāng)然，*{padding：0；margin:0;}更是無法容忍的。
normalize.css
是一種css reset的替代方案，盡量保留瀏覽器的默認(rèn)樣式，不進(jìn)行太多的重置。
優(yōu)點(diǎn)：
- 保護(hù)有用的瀏覽器默認(rèn)的樣式而不是完全去掉它們。
- 為大部分html元素提供一般化的樣式。
- 修復(fù)瀏覽器自身的bug 并保證各瀏覽器的一致性。
- 用一些小技巧優(yōu)化css的可用性。
- 用注釋和詳細(xì)的文檔來解釋代碼。
Modernizr
很久之前，我們總要用自己的代碼檢測瀏覽器對某種特性的支持情況，比如要寫代碼判斷瀏覽器是否支持canvans。許多html5和css3的功能已經(jīng)在許多主流瀏覽器中實(shí)現(xiàn)出來。modernizr能夠告訴開發(fā)者，瀏覽器是否已經(jīng)實(shí)現(xiàn)他們想要的功能。這讓開發(fā)者在瀏覽器上可以充分利用這些新功能，或者嘗試制作解決方案來支持那些老舊的瀏覽器。
postCss
是使用js插件來轉(zhuǎn)換css的工具，支持變量，混入，未來css語法，內(nèi)聯(lián)圖像等。postcss可以作為預(yù)處理器使用，類似sass,less和stylus。但是，postcss是模塊化的工具，比之前那些快3-30倍，而且功能更強(qiáng)大。
查詢屬性兼容性的網(wǎng)站
瀏覽器市場份額
caniuse.com（查css屬性的兼容）
browserhacks（查hack的寫法）
