1. 什么是 CSS hack
由于不同廠商的瀏覽器杂数，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本瘸洛，如IE6和IE7揍移，對(duì)CSS的解析認(rèn)識(shí)不完全一樣，因此會(huì)導(dǎo)致生成的頁(yè)面效果不一樣反肋，得不到我們所需要的頁(yè)面效果那伐。
這個(gè)時(shí)候我們就需要針對(duì)不同的瀏覽器去寫(xiě)不同的CSS，讓它能在不同的瀏覽器中也能得到我們想要的頁(yè)面效果石蔗。
-
簡(jiǎn)單的說(shuō)罕邀，CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器。當(dāng)然养距，我們也可以反過(guò)來(lái)利用CSS hack為不同版本的瀏覽器定制編寫(xiě)不同的CSS效果诉探。
-
CSS Hack的3種表現(xiàn)形式：CSS屬性前綴法、選擇器前綴法以及IE條件注釋法（即HTML頭部引用if IE）Hack棍厌，實(shí)際項(xiàng)目中CSS Hack大部分是針對(duì)IE瀏覽器不同版本之間的表現(xiàn)差異而引入的肾胯。
- 屬性前綴法(即類(lèi)內(nèi)部Hack)：例如 IE6能識(shí)別下劃線""和星號(hào)" * "，IE7能識(shí)別星號(hào)" * "耘纱，但不能識(shí)別下劃線""敬肚，IE6~IE10都認(rèn)識(shí)"\9"，但firefox前述三個(gè)都不能認(rèn)識(shí)束析。
- 選擇器前綴法(即選擇器Hack)艳馒。
- IE條件注釋法(即HTML條件注釋Hack)：針對(duì)所有IE(注：IE10+已經(jīng)不再支持條件注釋)： ；針對(duì)IE6及以下版本：员寇。
這類(lèi)Hack不僅對(duì)CSS生效鹰溜，對(duì)寫(xiě)在判斷語(yǔ)句里面的所有代碼都會(huì)生效。
2. 瀏覽器兼容的思路
什么是瀏覽器兼容問(wèn)題
同一份代碼丁恭，有的瀏覽器渲染效果正常曹动，有的不正常。
- 不正常的原因是什么牲览？(不支持? bug墓陈？)
- 如何讓它展示正常?(條件注釋?zhuān)?單獨(dú)Hack？)
為什么會(huì)有瀏覽器兼容問(wèn)題
- 同一產(chǎn)品第献，版本越老 bug 越多
- 同一產(chǎn)品贡必，版本越新，功能越多
- 不同產(chǎn)品庸毫，不同標(biāo)準(zhǔn)仔拟，不同實(shí)現(xiàn)方式
處理兼容問(wèn)題的思路:
- 要不要做
產(chǎn)品的角度（產(chǎn)品的受眾、受眾的瀏覽器比例飒赃、效果優(yōu)先還是基本功能優(yōu)先）
成本的角度 (有無(wú)必要做某件事)
- 做到什么程度
讓哪些瀏覽器支持哪些效果
- 如何做
根據(jù)兼容需求選擇技術(shù)框架/庫(kù)(jQuery)利花，比如：Bootstrap (>=ie8)科侈、jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)、Vue (>= ie9)
根據(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)建頁(yè)面睡扬，保證最基本的功能盟蚣，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶(hù)體驗(yàn)卖怜。
優(yōu)雅降級(jí) (graceful degradation): 一開(kāi)始就構(gòu)建完整的功能屎开，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。
3. 列舉5種以上瀏覽器兼容的寫(xiě)法
- 條件注釋
<!--[if IE 7]><p>You are using Internet Explorer 6.</p><![endif]-->
<!--[if !IE]><!-->
<script>alert(1);</script>
<!--<![endif]-->
<!--[if IE 8]>
<link href="ie8only.css" rel="stylesheet">
<![endif]-->
| 項(xiàng)目 | 范例 | 說(shuō)明 | ||
|---|---|---|---|---|
| ! | [if !IE] | 非IE | ||
| lt | [if lt IE 5.5] | 小于IE 5.5 | ||
| lte | [if lte IE 6] | 小于等于IE6 | ||
| gt | [if gt IE 5] | 大于 IE5 | ||
| gte | [if gte IE 7] | 大于等于IE7 | ||
| [if (IE 6) | (IE 7)] | IE6或者IE7 |
- 屬性前綴
.box{
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie67*/
color: yellow\9; /*ie/edge 6-8*/
}
常見(jiàn)屬性的兼容情況
| 屬性 | 瀏覽器版本 |
|---|---|
| inline-block | >=ie8 |
| min-width/min-height | >=ie8 |
| :before,:after | >=ie8 |
| div:hover | >=ie7 |
| background-size | >=ie9 |
| 圓角 | >=ie9 |
| 陰影 | >=ie9 |
| 動(dòng)畫(huà)/漸變 | >=ie10 |
選擇器前綴
*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有效等等條件注釋結(jié)合類(lèi)選擇器整體優(yōu)化
<!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名稱(chēng)韧涨，這些class名稱(chēng)標(biāo)記當(dāng)前瀏覽器支持哪些特性和不支持哪些特性，支持的特性就直接顯示該特性的名稱(chēng)作為一個(gè)class（例:canvas,websockets）侮繁，不支持的特性顯示的class是“no-特性名稱(chēng)”虑粥。以下是IE9下生成的特征類(lèi)型。
<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">
可以直接使用Modernizr在元素里生成的class名稱(chēng)宪哩，在你的css文件里定義相應(yīng)的屬性以便支持當(dāng)前瀏覽器娩贷。例如，下面的代碼可以屬性锁孟，在支持shadow陰影的瀏覽器顯示shadow彬祖，不支持的瀏覽器顯示標(biāo)準(zhǔn)的邊框：
.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. 以下工具/名詞是做什么的?
條件注釋
條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語(yǔ)句。條件注釋可被用來(lái)向IE提供及隱藏代碼品抽。
條件注釋最初于微軟的 Internet Explorer 5瀏覽器中出現(xiàn)储笑，并且直至 Internet Explorer 9 均支持。微軟已宣布于IE10停止支持圆恤。IE Hack
針對(duì)IE瀏覽器編寫(xiě)不同的CSS的讓IE能夠正常渲染的過(guò)程突倍。js 能力檢測(cè)
使用JS的語(yǔ)法檢測(cè)瀏覽器支持的屬性，以便展示效果盆昙。html5shiv.js
用于解決IE9以下版本瀏覽器對(duì)HTML5新增標(biāo)簽不識(shí)別羽历，并導(dǎo)致CSS不起作用的問(wèn)題。所以我們?cè)谑褂眠^(guò)程中淡喜，想要讓低版本的瀏覽器秕磷，即IE9以下的瀏覽器支持，那么這款html5shiv.js是一個(gè)非常好的選擇炼团！respond.js
Respond.js 是一個(gè)小腳本澎嚣，用于為 IE6-8 以及其它不支持 CSS3 媒體查詢(xún)功能的瀏覽器提供媒體查詢(xún)的 min-width 和 max-width 特性疏尿，實(shí)現(xiàn)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)。css reset
將瀏覽器的默認(rèn)樣式全部去掉币叹，更準(zhǔn)確說(shuō)就是通過(guò)重新定義標(biāo)簽樣式润歉，“覆蓋”瀏覽器的CSS默認(rèn)屬性。normalize.css
Normalize.css 只是一個(gè)很小的CSS文件颈抚，但它在默認(rèn)的HTML元素樣式上提供了跨瀏覽器的高度一致性踩衩。相比于傳統(tǒng)的CSS reset，Normalize.css是一種現(xiàn)代的贩汉、為HTML5準(zhǔn)備的優(yōu)質(zhì)替代方案驱富。Normalize.css 是一個(gè)可以定制的CSS文件，它讓不同的瀏覽器在渲染網(wǎng)頁(yè)元素的時(shí)候形式更統(tǒng)一匹舞。
它可以：
保留有用的默認(rèn)值褐鸥，不同于許多 CSS reset 的簡(jiǎn)單粗暴全部抹掉。
標(biāo)準(zhǔn)化的樣式赐稽，適用范圍廣的元素叫榕。
糾正錯(cuò)誤和常見(jiàn)的瀏覽器的不一致性。
一些細(xì)微的改進(jìn)姊舵，提高了易用性晰绎。
使用詳細(xì)的注釋來(lái)解釋代碼。
Modernizr
Modernizr是一個(gè) JavaScript 庫(kù)括丁，用于檢測(cè)用戶(hù)瀏覽器的 HTML5 與 CSS3 特性荞下。
Modernizr 使你可以方便地為各種情況編寫(xiě) JavaScript 和 CSS，無(wú)論瀏覽器是否支持這些特性史飞。這是處理漸進(jìn)增強(qiáng)的完美方案尖昏。
Modernizr 會(huì)在頁(yè)面加載后立即檢測(cè)特性；然后創(chuàng)建一個(gè)包含檢測(cè)結(jié)果的 JavaScript 對(duì)象构资，同時(shí)在 html 元素加入方便你調(diào)整 CSS 的 class 名抽诉。postCSS
它可以被理解為一個(gè)平臺(tái)，可以讓一些插件在上面跑吐绵，它提供了一個(gè)解析器掸鹅，可以將CSS解析成抽象語(yǔ)法樹(shù)，通過(guò)PostCSS這個(gè)平臺(tái)拦赠，我們能夠開(kāi)發(fā)一些插件巍沙，來(lái)處理CSS。熱門(mén)插件如autoprefixer荷鼠，它可以幫我們處理兼容問(wèn)題句携，只需正常寫(xiě)CSS，autoprefixer可以幫我們自動(dòng)生成兼容性代碼允乐。
5. 一般在哪個(gè)網(wǎng)站查詢(xún)屬性兼容性矮嫉？
查詢(xún)CSS屬性兼容性 : http://caniuse.com/
