1塘娶、什么是 CSS hack
不同廠商的瀏覽器（比如Internet Explorer,Safari,Mozilla Firefox,Chrome等）或者是同一廠商的瀏覽器的不同版本（如IE6和IE7）對(duì)某些CSS代碼解析會(huì)存在一定的差異酬蹋，因此就會(huì)導(dǎo)致不同瀏覽器下給用戶展示的頁面效果不一樣鸥咖，碰到這樣的情況就需要開發(fā)人員通過針對(duì)不同的瀏覽器對(duì)應(yīng)寫出不同的CSS代碼，從而達(dá)到兼容不同瀏覽器的目的汉额，不會(huì)讓頁面因?yàn)闉g覽器的不同而產(chǎn)生有差異的顯示希痴，這種技術(shù)有個(gè)專門的名稱就是CSS Hack。
在中國怜姿，這種差異主要是體現(xiàn)在主流瀏覽器上慎冤，我們只要解決了主流瀏覽器之間的CSS差異就可以了。目前流行的主流瀏覽器有Internet Explorer,Google Chrome,FireFox,Apple Safair以及Opera,在本文里對(duì)應(yīng)簡(jiǎn)稱為IE（后面如果添加數(shù)字沧卢，數(shù)字代表版本號(hào)蚁堤，例如IE8），CH,FF,SA和OP但狭。
CSS Hack原理是通過不同瀏覽器自身所帶有的特別標(biāo)識(shí)符以及CSS中優(yōu)先級(jí)的機(jī)制來實(shí)現(xiàn)不同瀏覽器里CSS樣式兼容性的問題披诗。
CSS Hack有三種實(shí)現(xiàn)方式，它們分別是：
- CSS類內(nèi)部的Hack（CSS屬性前綴法）立磁；
例如 IE6能識(shí)別下劃線""和星號(hào)" * "呈队，IE7能識(shí)別星號(hào)" * "，但不能識(shí)別下劃線""唱歧，IE6~IE10都認(rèn)識(shí)"\9"宪摧，但firefox前述三個(gè)都不能認(rèn)識(shí)
- CSS選擇器的Hack（選擇器前綴法）；
它是指在CSS選擇器前面加上只有某種瀏覽器自己可以識(shí)別的特殊字符串颅崩。例如：IE6能識(shí)別*html .class{}几于，IE7能識(shí)別*+html .class{}。
- HTML頭部的Hack（IE條件注釋法）沿后。
針對(duì)所有IE(注：IE10+已經(jīng)不再支持條件注釋)： < !--[if IE] >IE瀏覽器顯示的內(nèi)容 < ![endif]-- >沿彭，針對(duì)IE6及以下版本：< !--[if lt IE 6] >只在IE6-顯示的內(nèi)容 < ![endif]-- >。這類Hack不僅對(duì)CSS生效尖滚，對(duì)寫在判斷語句里面的所有代碼都會(huì)生效喉刘。
2瞧柔、談一談瀏覽器兼容的思路
- 首先確認(rèn)要不要做兼容
- 產(chǎn)品的角度（產(chǎn)品的受眾、受眾的瀏覽器比例睦裳、效果優(yōu)先還是基本功能優(yōu)先）
- 成本的角度
- 然后確認(rèn)兼容程度)然后確認(rèn)兼容程度
- 讓哪些瀏覽器支持哪些效果
- 最后確定如何做)最后確定如何做
- 根據(jù)兼容需求選擇技術(shù)框架/庫(jquery)
- 根據(jù)兼容需求選擇兼容工具(html5shiv.js造锅、respond.js、css reset推沸、normalize.css备绽、Modernizr、postCSS)
- 條件注釋鬓催、CSS Hack肺素、js能力檢測(cè)做一些修補(bǔ)
- 兼容的兩種思想)兼容的兩種思想
- 漸進(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)行兼容课舍。
3塌西、瀏覽器兼容的寫法
- CSS屬性前綴法
* IE6,IE7可以識(shí)別
_ IE6可以識(shí)別
\9 IE6~IE10可以識(shí)別
-webkit- 針對(duì)safari，chrome瀏覽器的內(nèi)核CSS寫法
-moz- 針對(duì)firefox瀏覽器的內(nèi)核CSS寫法
-ms- 針對(duì)ie內(nèi)核的CSS寫法
-o- 針對(duì)Opera內(nèi)核的CSS寫法
box{
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie67*/
color: yellow\9; /*ie/edge 6-8*/
}
- IE條件注釋
IE條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語句筝尾。條件注釋可被用來向IE提供及隱藏代碼捡需，注意：只有 IE9以下的瀏覽器才能識(shí)別這種語法，其他瀏覽器僅僅認(rèn)為 是普通注釋筹淫。
<!--[if IE 6]>
<p>IE6下 這句生效站辉，在其他瀏覽器下認(rèn)為是普通注釋</p>
<![endif]-->
<!--[if !IE]><!-->
<script>alert("在 IE 下條件語法生效，但script不執(zhí)行损姜。在非 IE 下上下兩句都被當(dāng)做注釋所以當(dāng)前 script 會(huì)執(zhí)行");</script>
<!--<![endif]-->
<!--[if IE 8]>
<link href="ie8only.css" rel="stylesheet">
<![endif]-->
- IE條件注釋引用兼容工具／針對(duì)某瀏覽器的css文件
<!–-[if IE 7]><link rel="stylesheet" href="ie7.css" type="text/css" /><![endif]–->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
- IE條件注釋結(jié)合類選擇器饰剥，給特定瀏覽器的html增加新類名，css可有針對(duì)性書寫
<!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工具
運(yùn)行的時(shí)候它會(huì)在html元素上添加一批CSS的class名稱摧阅，這些class名稱標(biāo)記當(dāng)前瀏覽器支持哪些特性和不支持哪些特性汰蓉，支持的特性就直接顯示該天特性的名稱作為一個(gè)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">
.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;
}
4顾孽、以下工具/名詞是做什么的
- 條件注釋
條件注釋 是于HTML源碼中被 IE 有條件解釋的語句。條件注釋可被用來向 IE提供及隱藏代碼娇跟。條件注釋最初于IE5瀏覽器中出現(xiàn)岩齿，并且直至IE9均支持。微軟已宣布于IE10停止支持
條件注釋列舉：
<!–[if !IE]><!–><!–<![endif]–><!–除IE外都可識(shí)別（IE10版本以上也可以識(shí)別）–>
<!–[if IE]><![endif]–><!–IE9以及以下版本可識(shí)別–>
<!–[if IE 5]><![endif]–><!–僅IE5可識(shí)別–>
<!–[if IE 5.0]><![endif]–><!–僅IE5.0可識(shí)別–>
<!–[if IE 5.5]><![endif]–><!–僅IE5.5可識(shí)別–>
<!–[if IE 6]><![endif]–><!–僅IE6可識(shí)別–>
<!–[if IE 7]><![endif]–><!–僅IE7可識(shí)別–>
<!–[if IE 8]><![endif]–><!–僅IE8可識(shí)別–>
<!–[if IE 9]><![endif]–><!–僅IE9可識(shí)別–>
<!–[if lt IE 5]><![endif]–><!–IE5以下版本可識(shí)別–>
<!–[if lt IE 5.0]><![endif]–><!–IE5.0以下版本可識(shí)別–>
<!–[if lt IE 5.5]><![endif]–><!–IE5.5以下版本可識(shí)別–>
<!–[if lt IE 6]><![endif]–><!–IE6以下版本可識(shí)別–>
<!–[if lt IE 7]><![endif]–><!–IE7以下版本可識(shí)別–>
<!–[if lt IE 8]><![endif]–><!–IE8以下版本可識(shí)別–>
<!–[if lt IE 9]><![endif]–><!–IE9以下版本可識(shí)別–>
<!–[if lte IE 5]><![endif]–><!–IE5以及IE5以下版本可識(shí)別–>
<!–[if lte IE 5.0]><![endif]–><!–IE5.0以及IE5.0以下版本可識(shí)別–>
<!–[if lte IE 5.5]><![endif]–><!–IE5.5以及IE5.5以下版本可識(shí)別–>
<!–[if lte IE 6]><![endif]–><!–IE6以及IE6以下版本可識(shí)別–>
<!–[if lte IE 7]><![endif]–><!–IE7以及IE7以下版本可識(shí)別–>
<!–[if lte IE 8]><![endif]–><!–IE8以及IE8以下版本可識(shí)別–>
<!–[if lte IE 9]><![endif]–><!–IE9以及IE9以下版本可識(shí)別–>
<!–[if gt IE 5]><![endif]–><!–IE5以上版本可識(shí)別–>
<!–[if gt IE 5.0]><![endif]–><!–IE5.0以上版本可識(shí)別–>
<!–[if gt IE 5.5]><![endif]–><!–IE5.5以上版本可識(shí)別–>
<!–[if gt IE 6]><![endif]–><!–IE6以上版本可識(shí)別–>
<!–[if gt IE 7]><![endif]–><!–IE7以上版本可識(shí)別–>
<!–[if gt IE 8]><![endif]–><!–IE8以上版本可識(shí)別–>
<!–[if gt IE 9]><![endif]–><!–IE9以上版本可識(shí)別–>
<!–[if gte IE 5]><![endif]–><!–IE5以及IE5以上版本可識(shí)別–>
<!–[if gte IE 5.0]><![endif]–><!–IE5.0以及IE5.0以上版本可識(shí)別–>
<!–[if gte IE 5.5]><![endif]–><!–IE5.5以及IE5.5以上版本可識(shí)別–>
<!–[if gte IE 6]><![endif]–><!–IE6以及IE6以上版本可識(shí)別–>
<!–[if gte IE 7]><![endif]–><!–IE7以及IE7以上版本可識(shí)別–>
<!–[if gte IE 8]><![endif]–><!–IE8以及IE8以上版本可識(shí)別–>
<!–[if gte IE 9]><![endif]–><!–IE9以及IE9以上版本可識(shí)別–>
- IE Hack
針對(duì)IE瀏覽器的不同版本去寫不同的CSS苞俘，讓它能在這些瀏覽器中得到我們想要的頁面效果。
方法：CSS屬性前綴法龄章、IE條件注釋法以及選擇器前綴法
- js 能力檢測(cè)
能力檢測(cè)的目標(biāo)不是識(shí)別特定的瀏覽器吃谣，而是識(shí)別瀏覽器的能力乞封。采用這種方式不必顧及特定的瀏覽器如何如何，只要確定瀏覽器支持特定的能力岗憋，就可以給出解決方案肃晚。這一部分檢測(cè)是解決瀏覽器兼容問題的主要檢測(cè)。
- html5shiv.js
html5shiv主要解決HTML5提出的新的元素不被IE6-8識(shí)別仔戈，這些新元素不能作為父節(jié)點(diǎn)包裹子元素关串，并且不能應(yīng)用CSS樣式。讓CSS樣式應(yīng)用在未知元素上只需執(zhí)行document.createElement(elementName)即可實(shí)現(xiàn)监徘。html5shiv就是根據(jù)這個(gè)原理創(chuàng)建的晋修。
- respond.js
respond.js是一個(gè)快速、輕量的polyfill凰盔，用于為IE6-8以及其它不支持CSS3 Media Queries的瀏覽器提供媒體查詢的min-width和max-width特性墓卦，實(shí)現(xiàn)響應(yīng)式網(wǎng)頁設(shè)計(jì)（Responsive Web Design）
- css reset
在HTML標(biāo)簽在瀏覽器里有默認(rèn)的樣式，瀏覽器的默認(rèn)樣式往往會(huì)給我們帶來麻煩户敬，影響開發(fā)效率落剪。所以解決的方法就是一開始就將瀏覽器的默認(rèn)樣式全部去掉，更準(zhǔn)確說就是通過重新定義標(biāo)簽樣式尿庐。
- normalize.css
Normalize.css 只是一個(gè)很小的CSS文件忠怖，是一種CSS reset的替代方案，它讓不同的瀏覽器在渲染網(wǎng)頁元素的時(shí)候形式更統(tǒng)一抄瑟。它能夠:
- 保護(hù)有用的瀏覽器默認(rèn)樣式而不是完全去掉它們凡泣；
- 提供統(tǒng)一化的樣式：為大部分HTML元素提供統(tǒng)一化的樣式；
- 修復(fù)瀏覽器自身的bug并保證各瀏覽器的一致性锐借；
- 優(yōu)化CSS可用性：用一些小技巧问麸；
- 解釋代碼：注釋和詳細(xì)的文檔。
- Modernizr
作為一個(gè)開源的 JavaScript 庫钞翔，Modernizr 檢測(cè)瀏覽器對(duì)CSS3或HTML5功能支持情況.
Modernizr會(huì)在頁面加載后立即檢測(cè)特性严卖；然后創(chuàng)建一個(gè)包含檢測(cè)結(jié)果的 JavaScript對(duì)象，同時(shí)在html標(biāo)簽加入方便你調(diào)整CSS的class名.另外布轿，Modernizr還可以令I(lǐng)E支持對(duì)HTML5的元素應(yīng)用CSS樣式哮笆，這樣開發(fā)者就可以立即使用這些更富有語義化的標(biāo)簽了。
- postCSS
它可以被理解為一個(gè)平臺(tái)汰扭，可以讓一些插件在上面跑稠肘，它提供了一個(gè)解析器，可以將CSS解析成抽象語法樹萝毛，通過postCSS這個(gè)平臺(tái)项阴，我們能夠開發(fā)一些插件，來處理CSS笆包。熱門插件如autoprefixer环揽，它可以幫我們處理兼容問題略荡，只需正常寫CSS，autoprefixer可以幫我的自動(dòng)生成兼容性代碼歉胶。
5汛兜、常用網(wǎng)站
瀏覽器市場(chǎng)份額 ：
http://#baidu.com/data/browser
查CSS屬性兼容：
https://caniuse.com/
查 Hack 的寫法：
http://browserhacks.com/
