1. 什么是 CSS hack
由于不同廠商的瀏覽器，比如IE, Safari, Mozila Firefox, Chrome等，或者是同一廠商的瀏覽器的不同版本，如IE 6, IE 10，對(duì)于CSS的解析認(rèn)識(shí)不完全一樣，因此會(huì)導(dǎo)致生成的頁(yè)面效果不一樣，得不到我們所需要的頁(yè)面效果。寫出針對(duì)不同瀏覽器的CSS code就稱為CSS hack。讓它能在不同的瀏覽器中也能得到我們想要的頁(yè)面效果. CSS hack大致有三種表現(xiàn)形式，CSS屬性前綴法，選擇器前綴法， IE條件注釋法。
參考
2. 談一談瀏覽器兼容的思路
- 要不要做
- 產(chǎn)品的角度（產(chǎn)品的受眾、受眾的瀏覽器比例、效果有限還是基本功能有先
- 成本的角度（有無(wú)必要做某件事）
- 做到什么程度
- 讓哪些瀏覽器支持哪些效果
- 如何做
- 根據(jù)兼容需求選擇技術(shù)框架、庫(kù)（jquery）
- 根據(jù)兼容需求選擇兼容工具（html5shiv.js, respond.js, css reset, nomalize.css, Modemizr）
- 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)行兼容
3. 列舉5種以上瀏覽器兼容的寫法
- IE條件注釋
<!--[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 lt IE 9]>用于 IE9 以下版本<![endif]-->
<!--[if gte IE 8]>用于 IE8 或更高版本 <![endif]-->
<!--[if lte IE 7]> 用于 IE7或更低版本 <![endif]-->
<!--[if !IE]> -->用于非 IE <!-- <![endif]-->
- CSS屬性前后綴法
- “_″IE6 生效
- "*" IE6 7生效
- “\9″ IE6/IE7/IE8/IE9/IE10都生效
- “\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
- “\9\0″ 只對(duì)IE9/IE10生效，是IE9/10的hack
- Trident內(nèi)核：主要代表為IE瀏覽器,前綴為-ms-
Gecko內(nèi)核：主要代表為Firefox,前綴為-moz-
Presto內(nèi)核：主要代表為Opera,前綴為-o-
Webkit內(nèi)核：產(chǎn)要代表為Chrome和Safari,前綴為-webkit- - 選擇器前綴法
針對(duì)一些頁(yè)面表現(xiàn)不一致或者需要特殊對(duì)待的瀏覽器，在CSS選擇器前加上一些只有某些特定瀏覽器才能識(shí)別的前綴進(jìn)行hack（針對(duì)瀏覽器之間的表現(xiàn)差異而引入的，利用瀏覽器的bug來(lái)進(jìn)行針對(duì)性處理）。例如：
*html *前綴只對(duì)IE6生效
*+html *+前綴只對(duì)IE7生效 - 條件注釋法和類選擇器相結(jié)合
<!--[if IE 7]>
<html class="ie7 no-js">
...
</html>
<![endif]-->
--------------------------------------------------------------------
.clearfix {
/* 在非ie 7 瀏覽器中，clearfix展現(xiàn)該屬性 */
}
.ie7 .clearfix {
/* 只有ie7瀏覽器中，clearfix才會(huì)展現(xiàn)該屬性 */
}
- 使用Modernizr
Modernizr 會(huì)在頁(yè)面加載后立即檢測(cè)特性；然后創(chuàng)建一個(gè)包含檢測(cè)結(jié)果的 JavaScript 對(duì)象，同時(shí)在 html 元素加入方便你調(diào)整 CSS 的 class 名，這些class名稱標(biāo)記當(dāng)前瀏覽器支持哪些特性和不支持哪些特性，支持的特性就直接顯示該天特性的名稱作為一個(gè)class（例:canvas,websockets），不支持的特性顯示的class是“no-特性名稱”（可以在css文件中針對(duì)不同的class設(shè)置不同的屬性值）。
<head>
<meta charset="utf-8">
<title>My Beautiful Sample Page</title>
<script src="modernizr-1.5.min.js"></script>
</head>
<html class="no-js">
...
<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">
4. 以下工具/名詞是做什么的
- 條件注釋：條件注釋 ( conditional comment )是用于HTML源碼中被IE有條件解釋的語(yǔ)句。條件注釋可被用來(lái)向IE提供及隱藏代碼。（IE 10 及以后不再支持條件注釋）
- IE Hack： 寫出針對(duì)IE瀏覽器的CSS code稱為IE hack，讓它能在IE瀏覽器中也能得到我們想要的頁(yè)面效果。
- js 能力檢測(cè)：能力檢測(cè)的目標(biāo)不是識(shí)別特定的瀏覽器，而是識(shí)別瀏覽器的能力。使用這種方式無(wú)需顧及瀏覽器如何如何，只需確定瀏覽器是否支持特定的能力，就可以給出相關(guān)的方案。
- html5shiv.js：用于解決IE9以下版本瀏覽器對(duì)HTML5新增標(biāo)簽不識(shí)別，并導(dǎo)致CSS不起作用的問(wèn)題。
- respond.js： Respond.js讓不支持CSS3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持查詢。
- css reset: “樣式重置”——重置瀏覽器默認(rèn)樣式
- normalize.css: Normalize.css是一種CSS reset的替代方案，
我們創(chuàng)造normalize.css有下面這幾個(gè)目的 ：
- 保護(hù)有用的瀏覽器默認(rèn)樣式而不是完全去掉它們
- 一般化的樣式：為大部分HTML元素提供
- 修復(fù)瀏覽器自身的bug并保證各瀏覽器的一致性
- 優(yōu)化CSS可用性：用一些小技巧
- 解釋代碼：用注釋和詳細(xì)的文檔來(lái)
- Modernizr:一個(gè) JavaScript 庫(kù)，用于檢測(cè)用戶瀏覽器的 HTML5 與 CSS3 特性。Modernizr 會(huì)在頁(yè)面加載后立即檢測(cè)特性；然后創(chuàng)建一個(gè)包含檢測(cè)結(jié)果的 JavaScript 對(duì)象，同時(shí)在 html 元素加入方便你調(diào)整 CSS 的 class 名。
- postCSS: PostCSS 提供了一個(gè)解析器，它能夠?qū)?CSS 解析成抽象語(yǔ)法樹（AST）。PostCSS的目標(biāo)是通過(guò)自定義插件和工具這樣的生態(tài)系統(tǒng)來(lái)改造CSS，把擴(kuò)展的語(yǔ)法和特性轉(zhuǎn)換成現(xiàn)代的瀏覽器友好的CSS。
