什么是 CSS hack
簡單的說，HACK就是只有特定瀏覽器才能識(shí)別這段hack代碼。Hack也可以說是讓前端最為頭疼的問題，因?yàn)橐獙慛多種兼容代碼。這就是兼容性問題。
談一談瀏覽器兼容的思路
1.要不要做兼容？
對(duì)于一個(gè)網(wǎng)站，我們要大致了解受眾人群和瀏覽器，要確定這個(gè)網(wǎng)站是效果優(yōu)先還是基本功能優(yōu)先，里面的有些效果是否有必要實(shí)現(xiàn)等等，通過這些來確定瀏覽器是否要做兼容。
2.做到什么程度？
兼容IE6？兼容IE7？還是都兼容？
3.選擇合適的工具進(jìn)行開發(fā)
根據(jù)兼容需求選擇技術(shù)框架/庫(jquery等)；
根據(jù)兼容需求選擇兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr
postCSS）；
條件注釋、CSS Hack、js 能力檢測(cè)做一些修補(bǔ)。
逐漸增強(qiáng)：針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁面，保證最基本的功能，然后再針對(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)未來環(huán)境的需要。降級(jí)（功能衰減）意味著往回看；而漸進(jìn)增強(qiáng)則意味著朝前看，同時(shí)保證其根基處于安全地帶。
列舉5種以上瀏覽器兼容的寫法
css hack的三種形式
- 屬性前綴法
IE6能識(shí)別 * _ IE7能識(shí)別 * “-″減號(hào)是IE6專有的hack “\9”IE6~IE10都生效 “\0” IE8/IE9/IE10都生效，是IE8/9/10的hack “\9\0” 只對(duì)IE9/IE10生效，是IE9/10的hack .box{ color: red; _color: blue; /*ie6*/ *color: pink; /*ie67*/ color: yellow\9; /*ie 6-10*/ } - 選擇器前綴法
*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有效 - IE條件注釋法
！ [if !IE] 非IE | [if (IE 6)|(IE 7)] IE6或者IE7 lt (less than) [if lt IE 5.5] 小于IE 5.5 lte(less than equl) [if lte IE 6] 小于等于IE6 gt (greater than) [if gt IE 5] 大于 IE5 gte (greater than equl) [if gte IE 7] 大于等于IE7 <!–-[if IE 7]> <link rel="stylesheet" href="ie7.css" type="text/css" /> <![endif]–->
以下工具/名詞是做什么的
- 條件注釋
用于非 IE - IE Hack
針對(duì)IE瀏覽器編寫不同的CSS的讓IE能夠正常渲染的過程 - js 能力檢測(cè)
瀏覽器的能力檢測(cè)，檢測(cè)覽器是否支持特定的能力，就可以給出特定的解決方案。這一部分檢測(cè)是解決瀏覽器兼容問題的主要檢測(cè)。 - html5shiv.js
在使用html5的時(shí)候，有些瀏覽器不支持h5的一些新特性和標(biāo)簽，需要用這個(gè)html5shiv.js來模擬這些標(biāo)簽 - respond.js
在做響應(yīng)式網(wǎng)頁的時(shí)候一些瀏覽器器不支持媒體查詢等css3新特性，使用respond.js來兼容 - css reset
將瀏覽器的默認(rèn)樣式全部去掉，更準(zhǔn)確說就是通過重新定義標(biāo)簽樣式?！案采w”瀏覽器的CSS默認(rèn)屬性。更簡單的說法就是把瀏覽器提供的默認(rèn)樣式覆蓋掉！這就是CSS reset。 - normalize.css
Normalize.css 是一個(gè)可以定制的CSS文件，它讓不同的瀏覽器在渲染網(wǎng)頁元素的時(shí)候形式更統(tǒng)一。 - 保護(hù)有用的瀏覽器默認(rèn)樣式而不是完全去掉它們
- 一般化的樣式：為大部分HTML元素提供
- 修復(fù)瀏覽器自身的bug并保證各瀏覽器的一致性
- 優(yōu)化CSS可用性：用一些小技巧
- 解釋代碼：用注釋和詳細(xì)的文檔來
- Modernizr
Modernizr 使你可以方便地為各種情況編寫 JavaScript 和 CSS，無論瀏覽器是否支持這些特性。這是處理漸進(jìn)增強(qiáng)的完美方案。 - postCSS
PostCSS 是一個(gè)使用 JS 插件來轉(zhuǎn)換 CSS 的工具。這些插件可以支持使用變量，混入(mixin)，轉(zhuǎn)換未來的 CSS 語法，內(nèi)聯(lián)圖片等操作。
