CSS Hack
不同的瀏覽器對某些CSS代碼解析會存在一定的差異，因此就會導(dǎo)致不同瀏覽器下給用戶展示的頁面效果不一樣炊邦，碰到這樣的情況就需要開發(fā)人員通過針對不同的瀏覽器對應(yīng)寫出不同的CSS代碼埃碱，從而達到兼容不同瀏覽器的目的旅挤，不會讓頁面因為瀏覽器的不同而產(chǎn)生有差異的顯示饵婆，這種技術(shù)有個專門的名稱就是CSS Hack礼华。
在中國咐鹤，這種差異主要是體現(xiàn)在主流瀏覽器上，我們只要解決了主流瀏覽器之間的CSS差異就可以了圣絮。目前流行的主流瀏覽器有Internet Explorer,Google Chrome,FireFox,Apple Safair以及Opera,在本文里對應(yīng)簡稱為IE（后面如果添加數(shù)字祈惶，數(shù)字代表版本號，例如IE8）扮匠。
CSS Hack原理是通過不同瀏覽器自身所帶有的特別標(biāo)識符以及CSS中優(yōu)先級的機制來實現(xiàn)不同瀏覽器里CSS樣式兼容性的問題捧请。
CSS Hack有三種實現(xiàn)方式，它們分別是：CSS類內(nèi)部的Hack棒搜、CSS選擇器的Hack和HTML頭部的Hack疹蛉。
CSS類內(nèi)部的Hack：是指CSS屬性或?qū)傩灾道锛由现挥心硞€瀏覽器自己可以識別的特殊字符串。例如IE6和IE7都會識別在CSS里屬性名稱前加上“*”號的屬性力麸，但是firefox卻無法識別帶“*”號的屬性可款，因此下面的代碼：
body{
background:green;/* firefox下的顯示 * /
*background:red; /* IE6和IE7下的顯示 * /
}
CSS選擇器的Hack：它是指在CSS選擇器前面加上只有某種瀏覽器自己可以識別的特殊字符串。例如：IE6能識別*html .class{}克蚂，IE7能識別*+html .class{}闺鲸。
HTML頭部的Hack：這種方式主要是針對IE瀏覽器，IE瀏覽器是廣大Web前端工程師的痛埃叭，它不僅有很多自己獨有的區(qū)別于其他瀏覽器的CSS樣式摸恍，自己不同版本之間的CSS實現(xiàn)也會存在很大的差異。下面我們來看看這種方式的寫法：
<link src="iecss.css" rel="stylesheet" />
<![endif]-->
lt 小于
gt 大于
gte 大于或等于
lte 小于或等于
赤屋！ 非
這種寫法會被非IE的瀏覽器所忽略误墓，只有IE瀏覽器才會執(zhí)行上面的代碼，上面這段代碼的意思是當(dāng)IE的版本是8或者比8低的IE瀏覽器才會執(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>
運行這個頁面，firefox顯示的顏色是red然想，opera為blue莺奔，ie6為yellow，ie7為green，ie8以上的版本是turquoise令哟，chrome和safari為blcak恼琼。這個CSS Hack是我平時常用的一套模式。這里要說明下屏富，ie8以上包括ie8的CSS樣式差異性較少晴竞，而chrome和safari之間的CSS樣式差異較小，因此這里我并沒有為它們單獨進行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 */
我們會發(fā)現(xiàn)不同瀏覽器顯示的效果就會發(fā)生變化。ie8以上的版本以及opera顯示正常神年，但是chrome已维，safari，ie6已日，ie7顯示的是紅色垛耳，而firefox則沒有任何顏色。引起這個問題的原因是CSS優(yōu)先級的問題飘千，例如background:turquoise\9;這種寫法不會導(dǎo)致高版本的ie在顯示上產(chǎn)生偏差堂鲜，是因為高版本的ie會優(yōu)先使用這個樣式，對于同級別的CSS樣式护奈，最后面的樣式會覆蓋前面的樣式缔莲，例如我們在ie6和ie7下看到的情況，此外逆济，如果正確的樣式前面的樣式寫法導(dǎo)致瀏覽器無法正常解析酌予，那么就會導(dǎo)致整個CSS樣式加載的失敗，例如firefox奖慌。
因此編寫CSS Hack時候抛虫，對于屬性排列的順序是特別注意的。
CSS Hack是一個總結(jié)性和經(jīng)驗性很強的技術(shù)简僧，它不像很多編程技術(shù)那樣需要我們?nèi)シ磸?fù)理解一些邏輯上的關(guān)系建椰，而是需要我們平時多留心，多實踐岛马。接下來我將會列舉不同瀏覽器之間的CSS Hack技術(shù)棉姐，大家可以根據(jù)自己實際的情況選擇應(yīng)用。
對于ie啦逆，我們這邊主要考慮ie6伞矩，ie7，ie8夏志，ie9乃坤，這四種版本的ie是目前中國市場上最流行的ie版本，雖然ie10已經(jīng)出來，但是ie10現(xiàn)在使用的用戶相對較少湿诊，這邊不會作為重點講解狱杰。
對于CSS類內(nèi)部的Hack ，ie6有自己專有的判斷標(biāo)識“”,其他的瀏覽器都不會識別””,ie6也支持”*”厅须，但是“*”也被ie7識別仿畸，因此當(dāng)我們只想?yún)^(qū)別ie6和ie7的時候，可以按下面的代碼書寫：
div.d02{ *background:green; /* IE7\ */ _background:yellow;/* IE6 */}
上面的寫法既可以區(qū)分ie6和ie7朗和，但是如果我們顛倒其位置错沽，那么不管是ie6還是ie7都會顯示green顏色±。”*”和“_”是ie6和ie7專屬的甥捺，其他版本的瀏覽器都不支持該標(biāo)記。
ie6和ie7除了上面兩個專屬標(biāo)記镀层，IE6還能識別能識別*html selector{}镰禾，IE7還能能識別*+html . selector {}，大家看下面這段代碼：
*html div.d03{ background:yellow;/* IE6 */}*+html div.d03{ background:green;/* IE7 */}
這兩種寫法是等價的唱逢。IE6的*html selector {}和IE7的*+html . selector {}也都是專有標(biāo)記吴侦，別的瀏覽器都不會識別的。
還有個很有趣的標(biāo)記坞古，就是!important备韧，在網(wǎng)上很多資料說該標(biāo)記IE6不支持，IE7和firefox支持痪枫，為了驗證網(wǎng)上說法本人寫了下面的樣式：
div.d04{ background:red !important; }
使用的瀏覽器配置如下：
支持IE7织堂，IE8，IE9奶陈；IE6通過ietester實現(xiàn)易阳；firefox版本是23.0.1；chrome的版本是27.0.1453.116 m吃粒；opera的版本是12.12潦俺，運行上面的樣式實際的效果是：
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 能力檢測做一些修補
漸進增強和優(yōu)雅降級
** 漸進增強 (progressive enhancement)**
- 針對低版本瀏覽器進行構(gòu)建頁面窃植，保證最基本的功能帝蒿，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗巷怜。
優(yōu)雅降級 (graceful degradation)
- 一開始就構(gòu)建完整的功能葛超，然后再針對低版本瀏覽器進行兼容。
瀏覽器兼容的寫法
條件注釋：
<!–-[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 //只對IE6生效
*+html //只對IE7生效
@media screen\9{...} //只對IE6 7生效條件注釋結(jié)合類選擇器
<html dir="ltr" lang="en-US" class="no-js">利用Modernizr工具
- 條件注釋
在HTML源碼中被IE有條件解釋的語句延塑，可被用來向IE提供及隱藏代碼绣张。
但使用了條件注釋的頁面只能在IE9中正常工作，IE10不再支持條件注釋关带。
項目 范例 說明
IE Hack
針對不同的IE瀏覽器編寫不同的CSS侥涵，從而使IE能夠渲染出預(yù)期效果的過程。js 能力檢測
使用JS的語法檢測瀏覽器支持的屬性宋雏，以便展示效果html5shiv.js
用來在 IE6芜飘、7、8 中模擬實現(xiàn) html5 的標(biāo)簽磨总，以實現(xiàn)對 IE 6嗦明、7、8 的兼容respond.js
在IE6蚪燕、7中模擬實現(xiàn)CSS3的媒體查詢娶牌，實現(xiàn)響應(yīng)式css reset
用來完全去除瀏覽器的默認(rèn)樣式normalize.css
是css reset的改良版，在css reset的基礎(chǔ)上保護有用的瀏覽器默認(rèn)樣式馆纳、為大部分HTML元素提供一般化的樣式诗良、修復(fù)瀏覽器自身的bug并保證各瀏覽器的一致性、使用一些小技巧優(yōu)化CSS可用性厕诡、用注釋和詳細的文檔來解釋代碼累榜。Modernizr
Modernizr是一 個 JavaScript 庫，用于檢測用戶瀏覽器的 HTML5 與 CSS3 特性postCSS
PostCSS是一個JS插件轉(zhuǎn)換樣式表的工具灵嫌，這些插件能夠檢驗?zāi)愕腃SS壹罚、支持變量和混合，轉(zhuǎn)化css3的新特性語法寿羞、行內(nèi)圖片等猖凛。
一般在哪個網(wǎng)站查詢屬性兼容性？
可以使用 caniuse.com來查詢CSS屬性兼容情況绪穆，使用browserhacks.com來查詢?yōu)g覽器兼容的寫法辨泳。
