什么是 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)單的說非春，CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器柱徙。當(dāng)然，我們也可以反過來利用CSS hack為不同版本的瀏覽器定制編寫不同的CSS效果奇昙。
談一談瀏覽器兼容的思路
-
為什么會(huì)有瀏覽器兼容問題
- 同一瀏覽器护侮，版本越老 bug 越多;
- 同一瀏覽器，版本越新储耐，支持的特性越多;
- 不同瀏覽器羊初，標(biāo)準(zhǔn)不同，實(shí)現(xiàn)方式也有差異什湘。
-
處理兼容問題的思路
- 要不要做
- 產(chǎn)品的角度（產(chǎn)品的受眾长赞、受眾的瀏覽器比例、效果優(yōu)先還是基本功能優(yōu)先）闽撤；
- 成本的角度 (有無必要做某件事)
- 做到什么程度
讓哪些瀏覽器支持哪些效果得哆； - 如何做
- 根據(jù)兼容需求選擇技術(shù)框架/庫(kù)(如jquery 1.x.x)；
- 根據(jù)兼容需求選擇兼容工具：html5shiv哟旗、Respone.js柳恐、CSS Reset、normalize.css热幔、Modernizr.js、postcss讼庇。
- 條件注釋绎巨、CSS Hack、js 能力檢測(cè)做一些修補(bǔ)
-
漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)
- 漸進(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): 一開始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容和媳。
列舉5種以上瀏覽器兼容的寫法
#box{
color:red; ?* 所有瀏覽器都支持 *?
color:red !important; ?* Firefox格遭、IE7支持 *?
_color:red; ?* IE6支持 *?
*color:red; ?* IE6、IE7支持 *?
*+color:red; ?* IE7支持 *?
color:red \9; ?* IE6留瞳、IE7拒迅、IE8支持 *?
color:red \0; ?* IE8支持 *?
}
* ， ie6,ie7可以識(shí)別她倘；
_和- 璧微， ie6可以識(shí)別；
!important ,表示高優(yōu)先級(jí)硬梁，ie7及以上前硫，firefox都支持，ie6認(rèn)識(shí)帶!important的樣式屬性荧止，但不認(rèn)識(shí)!important的優(yōu)先級(jí)屹电；
-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寫法
以下工具/名詞是做什么的
- 條件注釋
是HTML源碼中被 Microsoft Internet Explorer有條件解釋的語(yǔ)句葱色。條件注釋可被用來向 Internet Explorer 提供及隱藏代碼。 - IE Hack
處理各個(gè)瀏覽器兼容問題娘香。 - js 能力檢測(cè)
瀏覽器的能力檢測(cè)目標(biāo)不是檢測(cè)特定的瀏覽器苍狰，而是檢測(cè)瀏覽器的能力。這樣烘绽，只需要檢測(cè)瀏覽器是否支持特定的能力淋昭，就可以給出特定的解決方案。這一部分檢測(cè)是解決瀏覽器兼容問題的主要檢測(cè)安接。 - html5shiv.js
由于IE6/IE7/IE8還有很大一部分用戶翔忽，為了讓網(wǎng)站瀏覽者都能正常的訪問HTML5網(wǎng)站，解決方案就有下面：- 使用Javascript來使不支持HTML5的瀏覽器支持HTML標(biāo)簽盏檐。目前大多網(wǎng)站采用的這種方式（Bootcss官方例子也是如此）歇式。
- 利用腳本document.createElement(“”)創(chuàng)建對(duì)應(yīng)的腳本，CSS選擇器便可正確應(yīng)用到該標(biāo)簽胡野。
- 考慮到IE9是支持html5的材失，所以直接在HTML頁(yè)面的head標(biāo)簽中添加腳本引用即可。
- respond.js
Respond.js 是一個(gè)快速硫豆、輕量的 polyfill龙巨，用于為 [IE]6-8 以及其它不支持 CSS3 Media Querie 的瀏覽器提供媒體查詢的 min-width 和 max-width 特性笼呆，實(shí)現(xiàn)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)（Responsive Web Design）。 - css reset
將瀏覽器的默認(rèn)樣式全部去掉旨别，更準(zhǔn)確說就是通過重新定義標(biāo)簽樣式诗赌。“覆蓋”瀏覽器的CSS默認(rèn)屬性秸弛。最最簡(jiǎn)單的說法就是把瀏覽器提供的默認(rèn)樣式覆蓋掉铭若！這就是CSS reset。 - normalize.css
Normalize.css 是一個(gè)可以定制的CSS文件胆屿，它讓不同的瀏覽器在渲染網(wǎng)頁(yè)元素的時(shí)候形式更統(tǒng)一奥喻。
- 保留有用的默認(rèn)值，不同于許多 CSS reset 的簡(jiǎn)單粗暴非迹。
- 標(biāo)準(zhǔn)化的樣式环鲤，適用范圍廣的元素。
- 糾正錯(cuò)誤和常見的瀏覽器的不一致性憎兽。
- 一些細(xì)微的改進(jìn)冷离，提高了易用性。
- 使用詳細(xì)的注釋來解釋代碼纯命。
- Modernizr
Modernizr 是一個(gè)很小的用來檢測(cè)下一代 Web 技術(shù)原生實(shí)現(xiàn)可用性的 JavaScript 庫(kù)西剥。
HTML5 和 CSS3 都引入了各自的新特性，但是同時(shí)也有很多瀏覽器不支持這些新特性亿汞。
Modernizr 提供了一種簡(jiǎn)單的方式檢測(cè)任意新特性瞭空，從而讓我們可以采取相應(yīng)的操作。比如疗我，瀏覽器還不支持視頻特性咆畏，那么我們可以顯示一個(gè)簡(jiǎn)單的頁(yè)面。
我們還可以基于某個(gè)特性的可用性來創(chuàng)建 CSS 規(guī)則吴裤，如果瀏覽器不支持某個(gè)新特性旧找，那么這些規(guī)則將會(huì)自動(dòng)應(yīng)用到網(wǎng)頁(yè)上。 - postCSS
它可以被理解為一個(gè)平臺(tái)麦牺，可以讓一些插件在上面跑钮蛛，它提供了一個(gè)解析器，可以將CSS解析成抽象語(yǔ)法樹剖膳，通過PostCSS這個(gè)平臺(tái)魏颓，我們能夠開發(fā)一些插件，來處理CSS吱晒。熱門插件如autoprefixer甸饱，它可以幫我們處理兼容問題，只需正常寫CSS枕荞，autoprefixer可以幫我的自動(dòng)生成兼容性代碼柜候。
