什么是 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è)面效果考润。
談一談瀏覽器兼容的思路
- 要不要做
- 產(chǎn)品的角度（產(chǎn)品的受眾狭园、受眾的瀏覽器比例、效果優(yōu)先還是基本功能優(yōu)先）
- 成本的角度 (有無(wú)必要做某件事)
- 做到什么程度
- 讓哪些瀏覽器支持哪些效果
- 如何做
- 根據(jù)兼容需求選擇技術(shù)框架/庫(kù)(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)建頁(yè)面抑胎，保證最基本的功能燥滑，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)
優(yōu)雅降級(jí) (graceful degradation): 一開(kāi)始就構(gòu)建完整的功能阿逃，然后再針對(duì)低版本瀏覽器進(jìn)行兼容铭拧。
參考stackoverflow-漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)的區(qū)別
列舉5種以上瀏覽器兼容的寫(xiě)法
- 條件注釋
<!--[if IE 6]>
<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]-->
范例
HTML
<!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]-->
CSS
.box{
color:red;
}
.ie7 .box{
color:blue;
}
當(dāng)IE7打開(kāi)時(shí) .box的字體就為藍(lán)色，因?yàn)闂l件注釋為html加了一個(gè)class=“no-js ie7 oldie”
- CSS屬性前綴法
.box{
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie67*/
color: yellow\9; /*ie/edge 6-8*/
}
- 選擇器前綴法
目前最常見(jiàn)的
*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有效
以下工具/名詞是做什么的
條件注釋
條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語(yǔ)句恃锉。條件注釋可被用來(lái)向IE提供及隱藏代碼搀菩。
IE Hack
使用特殊的符號(hào)或者方式寫(xiě)出只有IE瀏覽器可以解析的代碼，有CSS屬性前綴法破托、選擇器前綴法以及IE條件注釋法
js 能力檢測(cè)
用js檢測(cè)瀏覽器對(duì)屬性是否支持一些特定的屬性
html5shiv.js
HTML5 Shiv可以在舊版Internet Explorer中使用HTML5部分元素肪跋，并為Internet Explorer 6-9，Safari 4.x（和iPhone 3.x）和Firefox 3.x提供基本的HTML5樣式土砂。
respond.js
讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持媒體查詢州既。
css reset
通過(guò)重新定義標(biāo)簽樣式谜洽，“覆蓋”瀏覽器默認(rèn)的css樣式
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現(xiàn)在已經(jīng)被用于Twitter Bootstrap实束、HTML5 Boilerplate、GOV.UK造寝、Rdio磕洪、CSS Tricks 以及許許多多其他框架、工具和網(wǎng)站上诫龙。
Modernizr
Modernizr是一個(gè)JavaScript庫(kù)析显，可以檢測(cè)用戶瀏覽器中的HTML5和CSS3功能。
postCSS
PostCSS是一款通過(guò)JS插件來(lái)轉(zhuǎn)換CSS的工具签赃。這些插件能幫你校驗(yàn)?zāi)愕腃SS代碼谷异、轉(zhuǎn)換未來(lái)的CSS語(yǔ)法、支持變量和混寫(xiě)锦聊、以及內(nèi)聯(lián)圖片等等歹嘹。
