1.什么是 CSS hack?
同一份代碼欺旧，在不同的瀏覽器,甚至同一瀏覽器的不同版本中,對(duì)CSS的解析認(rèn)識(shí)不一樣偿曙，導(dǎo)致生成的頁面效果不一致悠瞬，寫出針對(duì)不同瀏覽器CSS code就稱為CSS hack
為什么會(huì)有瀏覽器兼容問題?
同一產(chǎn)品昵骤，版本越老 bug 越多
同一產(chǎn)品，版本越新交惯，功能越多
不同產(chǎn)品次泽，不同標(biāo)準(zhǔn)，不同實(shí)現(xiàn)方式
由于不同廠商的瀏覽器商玫，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等箕憾，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7拳昌，對(duì)CSS的解析認(rèn)識(shí)不完全一樣，因此會(huì)導(dǎo)致生成的頁面效果不一樣钠龙，得不到我們所需要的頁面效果炬藤。
這個(gè)時(shí)候我們就需要針對(duì)不同的瀏覽器去寫不同的CSS御铃，讓它能在不同的瀏覽器中也能得到我們想要的頁面效果
2.談一談瀏覽器兼容的思路?
- 從產(chǎn)品的角度:（產(chǎn)品的受眾、受眾的瀏覽器比例沈矿、效果優(yōu)先還是基本功能優(yōu)先）
- 成本的角度: (有無必要做某件事)
- 做到什么程度: 想讓哪些瀏覽器支持哪些效果
- 以上3點(diǎn)是為了確定是否為這幾種瀏覽器以及這些瀏覽器的舊版本做適配,是否需要寫更多的css hack代碼做個(gè)工作量權(quán)衡.
- 如何做根據(jù)兼容需求選擇技術(shù)框架/庫(jquery)
根據(jù)兼容需求選擇兼容工具(html5shiv.js上真、respond.js、css reset羹膳、normalize.css睡互、Modernizr)
postCSS - 條件注釋、CSS Hack陵像、js 能力檢測做一些修補(bǔ)
漸進(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ū)別
3.列舉5種以上瀏覽器兼容的寫法?
- 條件注釋
條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語句泞歉。條件注釋可被用來向IE提供及隱藏代碼逼侦。
- 例如第一句,在IE 6瀏覽器里,會(huì)有p標(biāo)簽?zāi)蔷湓?You are using Internet Explorer 6",其他瀏覽器其他IE版本都不會(huì)有.
- 條件注釋放在HTML頭部引用
<!--[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]-->
- 條件注釋
| 項(xiàng)目 | 范例 | 說明 |
|---|---|---|
| ！ | [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```
- 2 屬性前綴法(即類內(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;
_color: blue; /ie6/
color: pink; /ie67/
color: yellow\9; /ie/edge 6-8*/
}
- 3 選擇器前綴法(即選擇器Hack)
IE條件注釋法(即HTML條件注釋Hack)：
針對(duì)所有IE(注：IE10+已經(jīng)不再支持條件注釋)：
針對(duì)IE6及以下版本：
這類Hack不僅對(duì)CSS生效涕滋，對(duì)寫在判斷語句里面的所有代碼都會(huì)生效
*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有效等等
- 4.條件注釋結(jié)合類選擇器整體優(yōu)化
<!DOCTYPE html><html dir="ltr" lang="en-US" class="no-js">
這樣在CSS中就不用在屬性前面加等一些亂七八糟的前綴*
- 5.
利用Modernizr工具**Modernizr**當(dāng)你在網(wǎng)頁中嵌入Modernizr的腳本時(shí)，它會(huì)檢測當(dāng)前瀏覽器是否支持CSS3的特性挠阁，比如 @font-face宾肺、border-radius、 border-image侵俗、box-shadow锨用、rgba() 等，同時(shí)也會(huì)檢測是否支持HTML5的特性——比如audio隘谣、video增拥、本地儲(chǔ)存、和新的 標(biāo)簽的類型和屬性等寻歧。在獲取到這些信息的基礎(chǔ)上掌栅，你可以在那些支持這些功能的瀏覽器上使用它們，來決定是否創(chuàng)建一個(gè)基于JS的fallback码泛，或者對(duì)那些不支持的瀏覽器進(jìn)行簡單的優(yōu)雅降級(jí)猾封。另外，Modernizr還可以令I(lǐng)E支持對(duì)HTML5的元素應(yīng)用CSS樣式噪珊，這樣開發(fā)者就可以立即使用這些更富有語義化的標(biāo)簽了晌缘。[參考文章](http://www.osmn00.com/translation/221.html)可以直接使用Modernizr在元素里生成的class名稱齐莲，在你的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;}
**書寫順序**
因?yàn)镃SS只要是同一級(jí)別岳枷，出現(xiàn)重復(fù)屬性設(shè)置芒填，后出現(xiàn)的會(huì)覆蓋前面出現(xiàn)的，所以在書寫的時(shí)候一般把識(shí)別能力強(qiáng)的寫前面空繁，看個(gè)例子
_background-color:red;
background-color:green; ```
如果希望DIV在IE6上是紅色殿衰，其它是綠色，上面的寫法可不可以呢家厌？試一下發(fā)現(xiàn)所有瀏覽器上都是綠色播玖，因?yàn)樵贗E6解析的時(shí)候，第一句能夠識(shí)別饭于，背景設(shè)為紅色蜀踏，但是第二句所有瀏覽器都識(shí)別，IE6也不例外掰吕，背景顏色又被設(shè)為綠色果覆，所以得反過來寫
background-color:green;
_background-color:red;```
總結(jié)出的規(guī)律就是：先一般，再特殊殖熟。有興趣的同學(xué)可以試試試試下面CSS局待，看看和你想的效果是否一樣
background-color:blue; /所有瀏覽器/
background-color:red\9;/所有的ie/
background-color:yellow\0; /* ie8+/
+background-color:pink; /+ ie7*/```
參考資料:
撒瑪利亞人博客:css hack
CSS hack一覽
4.以下工具/名詞是做什么的?
- 條件注釋:
- 是于HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼菱属。
（注：IE10不再支持條件注釋）
IE Hack:
針對(duì)IE瀏覽器編寫不同的CSS的讓IE能夠正常渲染的過程
js 能力檢測:
能力檢測的目標(biāo)不是識(shí)別特定的瀏覽器钳榨，而是識(shí)別瀏覽器的能力。采用這種方式不必顧及特定的瀏覽器如何如何纽门，只要確定瀏覽器支持特定的能力薛耻，就可以給出解決方案
html5shiv.js:
htnl5shiv主要解決HTML5提出的新的元素不被IE6-8識(shí)別，這些新元素不能作為父節(jié)點(diǎn)包裹子元素赏陵，并且不能應(yīng)用CSS樣式饼齿。讓CSS 樣式應(yīng)用在未知元素上只需執(zhí)行 document.createElement(elementName) 即可實(shí)現(xiàn),html5shiv就是根據(jù)這個(gè)原理創(chuàng)建的.
respond.js:
Respond.js是一個(gè)快速、輕量的腳本（3kb minified / 1kb gzipped）蝙搔，它的目標(biāo)是使得那些不支持CSS3 Media Queryes特性的瀏覽器能夠支持響應(yīng)性設(shè)計(jì)缕溉，尤其是小于等于8的ie瀏覽器。它是用這樣的方式吃型，盡可能的修補(bǔ)那些不支持的瀏覽器來支持.
css reset:
為什么會(huì)有CSS Reset的存在呢证鸥？
那是因?yàn)樵缙诘臑g覽器支持和理解的CSS規(guī)范不同，導(dǎo)致渲染頁面時(shí)效果不一致，會(huì)出現(xiàn)很多兼容性問題CSS reset的作用是讓各個(gè)瀏覽器的CSS樣式有一個(gè)統(tǒng)一的基準(zhǔn)敌土，而這個(gè)基準(zhǔn)更多的就是“清零”镜硕！normalize.css:
Normalize.css 只是一個(gè)很小的CSS文件运翼，但它在默認(rèn)的HTML元素樣式上提供了跨瀏覽器的高度一致性返干。相比于傳統(tǒng)的CSS reset，Normalize.css是一種現(xiàn)代的血淌、為HTML5準(zhǔn)備的優(yōu)質(zhì)替代方案.
為什么使用它?
保護(hù)有用的瀏覽器默認(rèn)樣式而不是完全去掉它們;
一般化的樣式：為大部分HTML元素提供;
修復(fù)瀏覽器自身的bug并保證各瀏覽器的一致性;
優(yōu)化CSS可用性：用一些小技巧;
解釋代碼：用注釋和詳細(xì)的文檔來.
參考Modernizr:
Modernizr 是一個(gè)很小的用來檢測下一代 Web 技術(shù)原生實(shí)現(xiàn)可用性的 JavaScript 庫矩欠。
HTML5 和 CSS3 都引入了各自的新特性，但是同時(shí)也有很多瀏覽器不支持這些新特性悠夯。
Modernizr 提供了一種簡單的方式檢測任意新特性癌淮，從而讓我們可以采取相應(yīng)的操作
參考postCSS:
PostCSS 是一個(gè)使用 JS 插件來轉(zhuǎn)換 CSS 的工具。這些插件可以支持使用變量沦补，混入(mixin)乳蓄，轉(zhuǎn)換未來的 CSS 語法，內(nèi)聯(lián)圖片等操作夕膀。
PostCSS 可以將 CSS 轉(zhuǎn)變成 JavaScript 可以操作的數(shù)據(jù)格式虚倒。基于 JS 寫的插件可以完成上面所說的那些操作产舞。PostCSS 本身不會(huì)對(duì) CSS 代碼作任何修改魂奥，她只是為插件提供了一些接口，方便插件完成它們各自的功能
5. 一般在哪個(gè)網(wǎng)站查詢屬性兼容性易猫？
- 輸入屬性比如block,再點(diǎn)擊查看所有(showall)
