本文版權(quán)歸饑人谷和本人所有
1.什么是 CSS hack
CSS hack由于不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本输虱，如IE6和IE7予权，對(duì)CSS的解析認(rèn)識(shí)不完全一樣，因此會(huì)導(dǎo)致生成的頁(yè)面效果不一樣浪册，得不到我們所需要的頁(yè)面效果扫腺。 這個(gè)時(shí)候我們就需要針對(duì)不同的瀏覽器去寫不同的CSS，讓它能夠同時(shí)兼容不同的瀏覽器村象，能在不同的瀏覽器中也能得到我們想要的頁(yè)面效果笆环。
簡(jiǎn)單說(shuō)就是先根據(jù)各種瀏覽器的bug去識(shí)別該瀏覽器，再對(duì)于該瀏覽器加樣式進(jìn)行彌補(bǔ)厚者，從而使css代碼兼容多種瀏覽器躁劣，在多種瀏覽器上都可以正常顯示。
2.談一談瀏覽器兼容的思路
- 首先考慮要不要做
- 產(chǎn)品的角度（產(chǎn)品的受眾库菲、受眾的瀏覽器比例账忘、效果優(yōu)先還是基本功能優(yōu)先）
- 成本的角度 (有無(wú)必要做某件事)
比如，如果要給政府部門做一個(gè)管理系統(tǒng)熙宇，政府部門的電腦很多還是XP系統(tǒng)鳖擒，還在用IE6.IE7這時(shí)就需要做到兼容ie6,ie7.如果是做一個(gè)流行的直播平臺(tái)，則不用考慮兼容ie6,7
做到什么程度
讓哪些瀏覽器支持哪些效果-
如何做
- 根據(jù)兼容需求選擇技術(shù)框架/庫(kù)(jquery)
- 根據(jù)兼容需求選擇兼容工具(html5shiv.js烫止、respond.js蒋荚、css reset、normalize.css馆蠕、Modernizr)
- postCSS
- 當(dāng)以上三種方法不夠時(shí)期升，或者自己的頁(yè)面比較小，用不到大型的庫(kù)互躬，可以用條件注釋播赁、CSS Hack、js 能力檢測(cè)做一些修補(bǔ)
這里有兩個(gè)概念吨铸，逐漸增強(qiáng)和優(yōu)雅降級(jí)
- 逐漸增強(qiáng)：針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面行拢，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果诞吱、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)舟奠。
- 優(yōu)雅降級(jí)：一開始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容房维。
- 區(qū)別：優(yōu)雅降級(jí)是從復(fù)雜的現(xiàn)狀開始沼瘫，并試圖減少用戶體驗(yàn)的供給，而漸進(jìn)增強(qiáng)則是從一個(gè)非沉基礎(chǔ)的耿戚，能夠起作用的版本開始湿故，并不斷擴(kuò)充，以適應(yīng)未來(lái)環(huán)境的需要膜蛔。降級(jí)（功能衰減）意味著往回看坛猪；而漸進(jìn)增強(qiáng)則意味著朝前看，同時(shí)保證其根基處于安全地帶皂股。
3.列舉5種以上瀏覽器兼容的寫法
- 1.條件注釋
<!--[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]-->
lt:less than
lte:less than and equal
gt:greater than
- css hack
(1) 屬性前綴法(即類內(nèi)部Hack)
屬性前綴法是在CSS樣式屬性名前加上一些只有特定瀏覽器才能識(shí)別的hack前綴墅茉，以達(dá)到預(yù)期的頁(yè)面展現(xiàn)效果。
說(shuō)明：
在標(biāo)準(zhǔn)模式中
“-″減號(hào)是IE6專有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效呜呐，是IE8/9/10的hack
“\9\0″ 只對(duì)IE9/IE10生效就斤，是IE9/10的hack
- css hack
.hack{
/* 注意順序，否則IE6/7下可能無(wú)法正確顯示蘑辑，導(dǎo)致結(jié)果顯示為白色背景*/
background-color:red; /* All browsers */
background-color:blue !important;/* All browsers but IE6 */
*background-color:black; /* IE6, IE7 */
+background-color:yellow;/* IE6, IE7*/
background-color:gray\9; /* IE6, IE7, IE8, IE9, IE10 */
background-color:purple\0; /* IE8, IE9, IE10 */
background-color:orange\9\0;/*IE9, IE10*/
_background-color:green; /* Only works in IE6 */
}
(2) 選擇器前綴法
選擇器前綴法是針對(duì)一些頁(yè)面表現(xiàn)不一致或者需要特殊對(duì)待的瀏覽器洋机，在CSS選擇器前加上一些只有某些特定瀏覽器才能識(shí)別的前綴進(jìn)行hack
*html *前綴只對(duì)IE6生效
*+html *+前綴只對(duì)IE7生效
-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寫法（3）IE條件注釋法(即HTML條件注釋Hack)
針對(duì)所有IE(注：IE10+已經(jīng)不再支持條件注釋)： 刁标，針對(duì)IE6及以下版本：。這類Hack不僅對(duì)CSS生效址晕，對(duì)寫在判斷語(yǔ)句里面的所有代碼都會(huì)生效(4)條件注釋與類選擇器結(jié)合
<!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]-->
4膀懈、以下工具/名詞是做什么的
- 條件注釋
條件注釋是一種安全的區(qū)分IE瀏覽器版本的語(yǔ)法，且被認(rèn)為是取代針對(duì)IE css hack的首選辦法谨垃。
寫法有：
<!--[if IE]>用于 IE <![endif]-->
<!--[if IE 6]>用于 IE6 <![endif]-->
<!--[if IE 7]>用于 IE7 <![endif]-->
<!--[if IE 8]>用于 IE8 <![endif]-->
<!--[if IE 9]>用于 IE9 <![endif]-->
<!--[if gt IE 6]> 用于 IE6 以上版本<![endif]-->
<!--[if lte IE 7]> 用于 IE7或更低版本 <![endif]-->
<!--[if gte IE 8]>用于 IE8 或更高版本 <![endif]-->
<!--[if lt IE 9]>用于 IE9 以下版本<![endif]-->
<!--[if !IE]> -->用于非 IE <!-- <![endif]-->
- IE Hack
針對(duì)IE瀏覽器編寫不同的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
讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持查詢。 - css reset
通過(guò)重新定義標(biāo)簽樣式纷责，“覆蓋”瀏覽器的CSS默認(rèn)屬性捍掺，比如非常暴力的
* { margin:0; padding:0;
}
- normalize.css
不再暴力更改所有的瀏覽器樣式，保護(hù)了有價(jià)值的默認(rèn)值再膳，它不講求樣式一致挺勿，而講求通用性和可維護(hù)性
- Normalize.css做了以下幾件事：
1、 保護(hù)有用的瀏覽器默認(rèn)樣式而不是完全去掉它們
2喂柒、一般化的樣式：為大部分HTML元素提供
3不瓶、 修復(fù)瀏覽器自身的bug并保證各瀏覽器的一致性
4禾嫉、 優(yōu)化CSS可用性：用一些小技巧
5、解釋代碼：用注釋和詳細(xì)的文檔來(lái)
Modernizr
當(dāng)你在網(wǎng)頁(yè)中嵌入Modernizr的腳本時(shí)蚊丐，它會(huì)檢測(cè)當(dāng)前瀏覽器是否支持CSS3的特性熙参，比如 @font-face、border-radius麦备、 border-image尊惰、box-shadow、rgba() 等泥兰，同時(shí)也會(huì)檢測(cè)是否支持HTML5的特性——比如audio、video题禀、本地儲(chǔ)存鞋诗、和新的 <input>標(biāo)簽的類型和屬性等。在獲取到這些信息的基礎(chǔ)上迈嘹，你可以在那些支持這些功能的瀏覽器上使用它們削彬，來(lái)決定是否創(chuàng)建一個(gè)基于JS的fallback，或者對(duì)那些不支持的瀏覽器進(jìn)行簡(jiǎn)單的優(yōu)雅降級(jí)秀仲。另外融痛，Modernizr還可以令I(lǐng)E支持對(duì)HTML5的元素應(yīng)用CSS樣式，這樣開發(fā)者就可以立即使用這些更富有語(yǔ)義化的標(biāo)簽了神僵。
參考文章
http://www.osmn00.com/translation/221.html
postCSS
它可以被理解為一個(gè)平臺(tái)雁刷，可以讓一些插件在上面跑，它提供了一個(gè)解析器保礼，可以將CSS解析成抽象語(yǔ)法樹沛励，通過(guò)PostCSS這個(gè)平臺(tái)，我們能夠開發(fā)一些插件炮障，來(lái)處理CSS目派。熱門插件如autoprefixer，它可以幫我們處理兼容問(wèn)題胁赢，只需正常寫CSS企蹭，autoprefixer可以幫我的自動(dòng)生成兼容性代碼
參考文章：
https://segmentfault.com/a/1190000003909268
