什么是 CSS hack
由于不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對(duì)CSS的解析認(rèn)識(shí)不完全一樣，因此會(huì)導(dǎo)致生成的頁面效果不一樣，得不到我們所需要的頁面效果。 這個(gè)時(shí)候我們就需要針對(duì)不同的瀏覽器去寫不同的CSS，讓它能在不同的瀏覽器中也能得到我們想要的頁面效果。
簡(jiǎn)單說就是先根據(jù)各種瀏覽器的bug去識(shí)別該瀏覽器，再對(duì)于該瀏覽器加樣式進(jìn)行彌補(bǔ)，從而使css代碼兼容多種瀏覽器，在多種瀏覽器上都可以正常顯示。
實(shí)際項(xiàng)目中CSS Hack大部分是針對(duì)IE瀏覽器不同版本之間的表現(xiàn)差異而引入的。一般情況下，我們盡量避免使用CSS hack，但是有些情況為了顧及用戶體驗(yàn)實(shí)現(xiàn)向下兼容，不得已才使用hack。使用hack雖然對(duì)頁面表現(xiàn)的一致性有好處，但過多的濫用會(huì)造成html文檔混亂不堪，增加管理和維護(hù)的負(fù)擔(dān)。CSS Hack大致有3種表現(xiàn)形式，CSS屬性前綴法、選擇器前綴法、以及IE條件注釋法（即HTML頭部引用if IE）。
屬性前綴法(即類內(nèi)部Hack)：例如 IE6能識(shí)別下劃線"_"和星號(hào)" * "，IE7能識(shí)別星號(hào)，但不能識(shí)別下劃線，IE6~IE10都認(rèn)識(shí)"\9"，但firefox前述三個(gè)都不能認(rèn)識(shí)。
box{
color: red; /*firefox 或 chrome 瀏覽器下是紅色*/
_color: blue; /*ie6*/
*color: pink; /*ie67*/
color: yellow\9; /*ie6~ie10*/
}
-
選擇器前綴法(即選擇器Hack)
*html {property:value;} IE6 *+html {property:value;} IE7 IE條件注釋法(即HTML條件注釋Hack)：詳見下面條件注釋
談一談瀏覽器兼容的思路
- 要不要做：
- 產(chǎn)品的角度： 調(diào)查產(chǎn)品的受眾，產(chǎn)品受眾的瀏覽器比例。瀏覽器市場(chǎng)份額。效果優(yōu)先還是基本功能優(yōu)先。這里就有一個(gè)漸進(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)行兼容。
stackoverflow-漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)的區(qū)別
- 漸進(jìn)增強(qiáng)
- 成本的角度：有無必要實(shí)現(xiàn)一些效果。因?yàn)橐恍┬Ч谛碌臑g覽器中實(shí)現(xiàn)和IE67中實(shí)現(xiàn)所需要的成本有很大的不同。
做到什么程度：
兼容到哪個(gè)最低版本的瀏覽器。是IE8還是要包括IE67。如何做：
- 根據(jù)兼容需求選擇技術(shù)框架/庫(jquery)。如果需要兼容IE67，我們可以使用jQuery低一些的版本去兼容js。
- 根據(jù)兼容需求選擇兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)。
- postCSS。
- 條件注釋、CSS Hack、js 能力檢測(cè)做一些修補(bǔ)。
- 用得到的網(wǎng)站： http://browserhacks.com/
列舉5種以上瀏覽器兼容的寫法
- 清除浮動(dòng)
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1; /* 僅對(duì)ie67有效 */
}
-
inline-block的ie67兼容
.target{
display: inline-block;
*display: inline;
*zoom: 1;
}
- 使用
respond.js和html5shiv.js
<!--[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]-->
- 使用條件注釋
<!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]-->
- 使用 Autoprefixer 生成主流瀏覽器前綴。
http://autoprefixer.github.io/
以下工具/名詞是做什么的
- 條件注釋
是HTML源碼中被 IE5到 IE9 有條件解釋的語句。條件注釋可被用來向 IE提供及隱藏代碼。
<!--[if !IE]><!-->
<script>alert(1);</script>
<!--<![endif]-->
<!–除IE外都可識(shí)別（IE10版本以上也可以識(shí)別）–>
<!--[if IE 6]>
<p>You are using Internet Explorer 6.</p>
<![endif]-->
<!–僅IE6可識(shí)別–>
<!--[if IE 8]>
<link href="ie8only.css" rel="stylesheet">
<![endif]-->
<!–僅IE8可識(shí)別–>
<!--[if lt IE 6]>
<![endif] -->
<!–IE6以下版本可識(shí)別–>
<!-- [if lte IE 8]>
<![endif] -->
<!–IE8以及IE8以下版本可識(shí)別–>
<!-- [if gt IE 7]>
<![endif] -->
<!–IE7以上版本可識(shí)別–>
<!--[if gte IE 6]>
<![endif]-->
<!–IE6以及IE6以上版本可識(shí)別–>
<!--[if (IE 6)|(IE 7)]>
<![endif]-->
<!–IE6或者IE7版本可識(shí)別–>
IE Hack
針對(duì)IE瀏覽器編寫不同的CSS的讓IE能夠正常渲染的過程js 能力檢測(cè)
能力檢測(cè)的目標(biāo)不是識(shí)別特定的瀏覽器，而是識(shí)別瀏覽器的能力。采用這種方式不必顧及特定的瀏覽器如何如何，只要確定瀏覽器支持特定的能力，就可以給出解決方案。
一篇文章html5shiv.js
用于解決IE9以下版本瀏覽器對(duì)HTML5新增標(biāo)簽不識(shí)別，并導(dǎo)致CSS不起作用的問題。
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>respond.js
讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持媒體查詢。
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>css reset, normalize.css
css reset 和 normalize.css 都是用來使瀏覽器呈現(xiàn)一致的樣式效果誕生的工具。css reset 更激進(jìn)一些，先將所有瀏覽器的默認(rèn)樣式刪除再添加樣式。normalize.css 是更溫和的解決辦法。是目前主流的選擇。
關(guān)于css reset 和 normalize.css 的文章Modernizr
Modernizr是一個(gè)js腳本來幫助探測(cè)瀏覽器是否支持某種新特性，甚至可以加載額外的script腳本。
官網(wǎng)
一篇文章postCSS
通過PostCSS這個(gè)平臺(tái)，我們能夠開發(fā)一些插件，來處理CSS。熱門插件如autoprefixer，它可以幫我們處理兼容問題，只需正常寫CSS，autoprefixer可以幫我的自動(dòng)生成兼容性代碼
autoprefixer github
