什么是 CSS hack
簡(jiǎn)單的說(shuō)宇驾，HACK就是只有特定瀏覽器才能識(shí)別這段hack代碼。Hack也可以說(shuō)是讓前端最為頭疼的問(wèn)題，因?yàn)橐獙慛多種兼容代碼稽莉。這就是兼容性問(wèn)題。
談一談瀏覽器兼容的思路
1.要不要做兼容涩搓？
對(duì)于一個(gè)網(wǎng)站污秆，我們要大致了解受眾人群和瀏覽器，要確定這個(gè)網(wǎng)站是效果優(yōu)先還是基本功能優(yōu)先昧甘，里面的有些效果是否有必要實(shí)現(xiàn)等等混狠，通過(guò)這些來(lái)確定瀏覽器是否要做兼容。
2.做到什么程度疾层？
兼容IE6将饺？兼容IE7？還是都兼容痛黎？
3.選擇合適的工具進(jìn)行開發(fā)
根據(jù)兼容需求選擇技術(shù)框架/庫(kù)(jquery等)予弧；
根據(jù)兼容需求選擇兼容工具(html5shiv.js、respond.js湖饱、css reset掖蛤、normalize.css、Modernizr
postCSS）井厌；
條件注釋蚓庭、CSS Hack、js 能力檢測(cè)做一些修補(bǔ)仅仆。
逐漸增強(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í)保證其根基處于安全地帶奢啥。
列舉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能夠正常渲染的過(guò)程 - js 能力檢測(cè)
瀏覽器的能力檢測(cè)寂纪，檢測(cè)覽器是否支持特定的能力，就可以給出特定的解決方案赌结。這一部分檢測(cè)是解決瀏覽器兼容問(wèn)題的主要檢測(cè)捞蛋。 - html5shiv.js
在使用html5的時(shí)候，有些瀏覽器不支持h5的一些新特性和標(biāo)簽柬姚，需要用這個(gè)html5shiv.js來(lái)模擬這些標(biāo)簽 - respond.js
在做響應(yīng)式網(wǎng)頁(yè)的時(shí)候一些瀏覽器器不支持媒體查詢等css3新特性拟杉，使用respond.js來(lái)兼容 - css reset
將瀏覽器的默認(rèn)樣式全部去掉，更準(zhǔn)確說(shuō)就是通過(guò)重新定義標(biāo)簽樣式量承“嵘瑁“覆蓋”瀏覽器的CSS默認(rèn)屬性。更簡(jiǎn)單的說(shuō)法就是把瀏覽器提供的默認(rèn)樣式覆蓋掉撕捍！這就是CSS reset拿穴。 - normalize.css
Normalize.css 是一個(gè)可以定制的CSS文件，它讓不同的瀏覽器在渲染網(wǎng)頁(yè)元素的時(shí)候形式更統(tǒng)一忧风。 - 保護(hù)有用的瀏覽器默認(rèn)樣式而不是完全去掉它們
- 一般化的樣式：為大部分HTML元素提供
- 修復(fù)瀏覽器自身的bug并保證各瀏覽器的一致性
- 優(yōu)化CSS可用性：用一些小技巧
- 解釋代碼：用注釋和詳細(xì)的文檔來(lái)
- Modernizr
Modernizr 使你可以方便地為各種情況編寫 JavaScript 和 CSS默色，無(wú)論瀏覽器是否支持這些特性。這是處理漸進(jìn)增強(qiáng)的完美方案狮腿。 - postCSS
PostCSS 是一個(gè)使用 JS 插件來(lái)轉(zhuǎn)換 CSS 的工具腿宰。這些插件可以支持使用變量，混入(mixin)缘厢，轉(zhuǎn)換未來(lái)的 CSS 語(yǔ)法吃度，內(nèi)聯(lián)圖片等操作。
