CSS Hack
不同的瀏覽器對(duì)某些CSS代碼解析會(huì)存在一定的差異，因此就會(huì)導(dǎo)致不同瀏覽器下給用戶展示的頁面效果不一樣，碰到這樣的情況就需要開發(fā)人員通過針對(duì)不同的瀏覽器對(duì)應(yīng)寫出不同的CSS代碼，從而達(dá)到兼容不同瀏覽器的目的，不會(huì)讓頁面因?yàn)闉g覽器的不同而產(chǎn)生有差異的顯示，這種技術(shù)有個(gè)專門的名稱就是CSS Hack。
在中國(guó)，這種差異主要是體現(xiàn)在主流瀏覽器上，我們只要解決了主流瀏覽器之間的CSS差異就可以了。目前流行的主流瀏覽器有Internet Explorer,Google Chrome,FireFox,Apple Safair以及Opera,在本文里對(duì)應(yīng)簡(jiǎn)稱為IE（后面如果添加數(shù)字，數(shù)字代表版本號(hào)，例如IE8）。
CSS Hack原理是通過不同瀏覽器自身所帶有的特別標(biāo)識(shí)符以及CSS中優(yōu)先級(jí)的機(jī)制來實(shí)現(xiàn)不同瀏覽器里CSS樣式兼容性的問題。
CSS Hack有三種實(shí)現(xiàn)方式，它們分別是：CSS類內(nèi)部的Hack、CSS選擇器的Hack和HTML頭部的Hack。
CSS類內(nèi)部的Hack：是指CSS屬性或?qū)傩灾道锛由现挥心硞€(gè)瀏覽器自己可以識(shí)別的特殊字符串。例如IE6和IE7都會(huì)識(shí)別在CSS里屬性名稱前加上“*”號(hào)的屬性，但是firefox卻無法識(shí)別帶“*”號(hào)的屬性，因此下面的代碼：
body{
background:green;/* firefox下的顯示 * /
*background:red; /* IE6和IE7下的顯示 * /
}
CSS選擇器的Hack：它是指在CSS選擇器前面加上只有某種瀏覽器自己可以識(shí)別的特殊字符串。例如：IE6能識(shí)別*html .class{}，IE7能識(shí)別*+html .class{}。
HTML頭部的Hack：這種方式主要是針對(duì)IE瀏覽器，IE瀏覽器是廣大Web前端工程師的痛，它不僅有很多自己獨(dú)有的區(qū)別于其他瀏覽器的CSS樣式，自己不同版本之間的CSS實(shí)現(xiàn)也會(huì)存在很大的差異。下面我們來看看這種方式的寫法：
<link src="iecss.css" rel="stylesheet" />
<![endif]-->
lt 小于
gt 大于
gte 大于或等于
lte 小于或等于
！ 非
這種寫法會(huì)被非IE的瀏覽器所忽略，只有IE瀏覽器才會(huì)執(zhí)行上面的代碼，上面這段代碼的意思是當(dāng)IE的版本是8或者比8低的IE瀏覽器才會(huì)執(zhí)行下面的樣式。
下面我們來看一段代碼：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS hack技術(shù)</title>
</head>
<style type="text/css">
div {
width:400px;
height:120px;
margin-bottom:20px;
border-style:solid;
border-width:1px;
}
div.d01{
background:red;/* FF */ background:blue\0;/* OP */ background:turquoise\9;/* IE8+ */ [background:red;background:black;/* SA,CH */
*background:green; /* IE7 */ _background:yellow;/* IE6 */
}</style>
<body>
<div class="d01">
</div>
</body>
</html>
運(yùn)行這個(gè)頁面，firefox顯示的顏色是red，opera為blue，ie6為yellow，ie7為green，ie8以上的版本是turquoise，chrome和safari為blcak。這個(gè)CSS Hack是我平時(shí)常用的一套模式。這里要說明下，ie8以上包括ie8的CSS樣式差異性較少，而chrome和safari之間的CSS樣式差異較小，因此這里我并沒有為它們單獨(dú)進(jìn)行hack。
如果我們把上面代碼里的div.d01的內(nèi)容順序調(diào)整下，例如下面這樣：
background:blue\0;/* OP\ */ background:turquoise\9;/* IE8+ */ [background:red;background:black;/* SA,CH */ *background:green; /* IE7 */ _background:yellow;/* IE6 */ background:red;/* FF */
我們會(huì)發(fā)現(xiàn)不同瀏覽器顯示的效果就會(huì)發(fā)生變化。ie8以上的版本以及opera顯示正常，但是chrome，safari，ie6，ie7顯示的是紅色，而firefox則沒有任何顏色。引起這個(gè)問題的原因是CSS優(yōu)先級(jí)的問題，例如background:turquoise\9;這種寫法不會(huì)導(dǎo)致高版本的ie在顯示上產(chǎn)生偏差，是因?yàn)楦甙姹镜膇e會(huì)優(yōu)先使用這個(gè)樣式，對(duì)于同級(jí)別的CSS樣式，最后面的樣式會(huì)覆蓋前面的樣式，例如我們?cè)趇e6和ie7下看到的情況，此外，如果正確的樣式前面的樣式寫法導(dǎo)致瀏覽器無法正常解析，那么就會(huì)導(dǎo)致整個(gè)CSS樣式加載的失敗，例如firefox。
因此編寫CSS Hack時(shí)候，對(duì)于屬性排列的順序是特別注意的。
CSS Hack是一個(gè)總結(jié)性和經(jīng)驗(yàn)性很強(qiáng)的技術(shù)，它不像很多編程技術(shù)那樣需要我們?nèi)シ磸?fù)理解一些邏輯上的關(guān)系，而是需要我們平時(shí)多留心，多實(shí)踐。接下來我將會(huì)列舉不同瀏覽器之間的CSS Hack技術(shù)，大家可以根據(jù)自己實(shí)際的情況選擇應(yīng)用。
對(duì)于ie，我們這邊主要考慮ie6，ie7，ie8，ie9，這四種版本的ie是目前中國(guó)市場(chǎng)上最流行的ie版本，雖然ie10已經(jīng)出來，但是ie10現(xiàn)在使用的用戶相對(duì)較少，這邊不會(huì)作為重點(diǎn)講解。
對(duì)于CSS類內(nèi)部的Hack ，ie6有自己專有的判斷標(biāo)識(shí)“”,其他的瀏覽器都不會(huì)識(shí)別””,ie6也支持”*”，但是“*”也被ie7識(shí)別，因此當(dāng)我們只想?yún)^(qū)別ie6和ie7的時(shí)候，可以按下面的代碼書寫：
div.d02{ *background:green; /* IE7\ */ _background:yellow;/* IE6 */}
上面的寫法既可以區(qū)分ie6和ie7，但是如果我們顛倒其位置，那么不管是ie6還是ie7都會(huì)顯示green顏色?！?”和“_”是ie6和ie7專屬的，其他版本的瀏覽器都不支持該標(biāo)記。
ie6和ie7除了上面兩個(gè)專屬標(biāo)記，IE6還能識(shí)別能識(shí)別*html selector{}，IE7還能能識(shí)別*+html . selector {}，大家看下面這段代碼：
*html div.d03{ background:yellow;/* IE6 */}*+html div.d03{ background:green;/* IE7 */}
這兩種寫法是等價(jià)的。IE6的*html selector {}和IE7的*+html . selector {}也都是專有標(biāo)記，別的瀏覽器都不會(huì)識(shí)別的。
還有個(gè)很有趣的標(biāo)記，就是!important，在網(wǎng)上很多資料說該標(biāo)記IE6不支持，IE7和firefox支持，為了驗(yàn)證網(wǎng)上說法本人寫了下面的樣式：
div.d04{ background:red !important; }
使用的瀏覽器配置如下：
支持IE7，IE8，IE9；IE6通過ietester實(shí)現(xiàn)；firefox版本是23.0.1；chrome的版本是27.0.1453.116 m；opera的版本是12.12，運(yùn)行上面的樣式實(shí)際的效果是：
IE6，IE7，chrome，safari顯示為紅色，而 其他瀏覽器都沒有顯示任何顏色。
瀏覽器兼容的思路
-
要不要做
產(chǎn)品的角度（產(chǎn)品的受眾、受眾的瀏覽器比 例、效果優(yōu)先還是基本功能優(yōu)先）
成本的角度 (有無必要做某件事)
做到什么程度 讓哪些瀏覽器支持哪些效果
如何做-
根據(jù)兼容需求選擇技術(shù)框架/庫(jquery)
1. Bootstrap (>=ie8) 2. jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9) 3. Vue (>= ie9) 根據(jù)兼容需求選擇兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
postCSS
條件注釋、CSS Hack、js 能力檢測(cè)做一些修補(bǔ)
漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)
** 漸進(jìn)增強(qiáng) (progressive enhancement)**
- 針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁面，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)。
優(yōu)雅降級(jí) (graceful degradation)
- 一開始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。
瀏覽器兼容的寫法
條件注釋：
<!–-[if IE 7]><link rel="stylesheet" href="ie7.css" type="text/css" /><![endif]–->屬性選擇器
.box{
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie6 7*/
color: yellow\9; /*ie/edge 6-8*/
}選擇器前綴法
*html //只對(duì)IE6生效
*+html //只對(duì)IE7生效
@media screen\9{...} //只對(duì)IE6 7生效條件注釋結(jié)合類選擇器
<html dir="ltr" lang="en-US" class="no-js">利用Modernizr工具
- 條件注釋
在HTML源碼中被IE有條件解釋的語句，可被用來向IE提供及隱藏代碼。
但使用了條件注釋的頁面只能在IE9中正常工作，IE10不再支持條件注釋。
項(xiàng)目 范例 說明
IE Hack
針對(duì)不同的IE瀏覽器編寫不同的CSS，從而使IE能夠渲染出預(yù)期效果的過程。js 能力檢測(cè)
使用JS的語法檢測(cè)瀏覽器支持的屬性，以便展示效果html5shiv.js
用來在 IE6、7、8 中模擬實(shí)現(xiàn) html5 的標(biāo)簽，以實(shí)現(xiàn)對(duì) IE 6、7、8 的兼容respond.js
在IE6、7中模擬實(shí)現(xiàn)CSS3的媒體查詢，實(shí)現(xiàn)響應(yīng)式css reset
用來完全去除瀏覽器的默認(rèn)樣式normalize.css
是css reset的改良版，在css reset的基礎(chǔ)上保護(hù)有用的瀏覽器默認(rèn)樣式、為大部分HTML元素提供一般化的樣式、修復(fù)瀏覽器自身的bug并保證各瀏覽器的一致性、使用一些小技巧優(yōu)化CSS可用性、用注釋和詳細(xì)的文檔來解釋代碼。Modernizr
Modernizr是一 個(gè) JavaScript 庫，用于檢測(cè)用戶瀏覽器的 HTML5 與 CSS3 特性postCSS
PostCSS是一個(gè)JS插件轉(zhuǎn)換樣式表的工具，這些插件能夠檢驗(yàn)?zāi)愕腃SS、支持變量和混合，轉(zhuǎn)化css3的新特性語法、行內(nèi)圖片等。
一般在哪個(gè)網(wǎng)站查詢屬性兼容性？
可以使用 caniuse.com來查詢CSS屬性兼容情況，使用browserhacks.com來查詢?yōu)g覽器兼容的寫法。
