什么是 CSS hack
CSS hack由于不同廠商的瀏覽器贤惯，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等纸巷，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7厉萝，對CSS的解析認(rèn)識不完全一樣恍飘，因此會導(dǎo)致生成的頁面效果不一樣，得不到我們所需要的頁面效果谴垫。 這個(gè)時(shí)候我們就需要針對不同的瀏覽器去寫不同的CSS章母，讓它能夠同時(shí)兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果翩剪。簡單的說乳怎，CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器。當(dāng)然前弯，我們也可以反過來利用CSS hack為不同版本的瀏覽器定制編寫不同的CSS效果蚪缀。(摘自百度百科)
談一談瀏覽器兼容的思路
- 兼容性的必要性：
- 產(chǎn)品角度(產(chǎn)品的用戶群體，用戶群體比例恕出，效果優(yōu)先還是基本功能優(yōu)先)
- 成本角度(開發(fā)是需要時(shí)間和人力成本的询枚，看是否有必要去做)
- 兼容性要做到什么程度：
- 讓哪些瀏覽器去支持哪些效果
- 兼容性怎么去做：
- 根據(jù)兼容需求選擇技術(shù)框架/庫(jquery)
- 根據(jù)兼容需求選擇兼容工具(html5shiv.js、respond.js浙巫、css reset金蜀、normalize.css、Modernizr)
- 漸進(jìn)增強(qiáng)和優(yōu)雅降級
漸進(jìn)增強(qiáng)(progressive enhancement):針對低版本瀏覽器進(jìn)行構(gòu)建頁面的畴，保證最基本的功能渊抄，然后再針對高級瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)苗傅。
優(yōu)雅降級(graceful degradation):一開始就構(gòu)建完整功能抒线，然后再針對低版本瀏覽器進(jìn)行兼容。
*postCSS
- 條件注釋渣慕、CSS Hack嘶炭、js能力檢測做一些修補(bǔ)抱慌。
列舉5種以上瀏覽器兼容的寫法
1.屬性前綴法(即類內(nèi)部Hack)是在CSS樣式屬性名前加上一些只有特定瀏覽器才能識別的hack前綴，以達(dá)到預(yù)期的頁面展現(xiàn)效果眨猎。 例如 IE6能識別下劃線"_"和星號" "抑进，IE7能識別星號" "，但不能識別下劃線""睡陪，IE6~IE10都認(rèn)識"\9"寺渗，但firefox前述三個(gè)都不能認(rèn)識;例如：
.box{
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie67*/
color: yellow\9; /*ie/edge 6-8*/
}
2.選擇器前綴法(即選擇器Hack)是針對一些頁面表現(xiàn)不一致或者需要特殊對待的瀏覽器，在CSS選擇器前加上一些只有某些特定瀏覽器才能識別的前綴進(jìn)行hack;前最常見的是：
*html *前綴只對IE6生效 兰迫；
*+html *+前綴只對IE7生效 信殊；
@media screen\9{...}只對IE6/7生效 ；
@media \0screen {body { background: red; }}只對IE8有效 汁果；
@media \0screen,screen\9{body { background: blue; }}只對IE6/7/8有效 涡拘；
@media screen\0 {body { background: green; }} 只對IE8/9/10有效 ；
@media screen and (min-width:0\0) {body { background: gray; }} 只對IE9/10有效 据德；
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對IE10有效 鳄乏；
3.IE條件注釋法(即HTML條件注釋Hack)：針對所有IE(注：IE10+已經(jīng)不再支持條件注釋)： ，針對IE6及以下版本：棘利。這類Hack不僅對CSS生效橱野，對寫在判斷語句里面的所有代碼都會生效;例如：
<!–-[if IE 7]><link rel="stylesheet" href="ie7.css" type="text/css" /><![endif]–->
4.條件注釋結(jié)合類選擇器整體優(yōu)化。
5.-webkit- 善玫，針對safari水援，chrome瀏覽器的內(nèi)核CSS寫法；
-moz-蝌焚，針對firefox瀏覽器的內(nèi)核CSS寫法裹唆；
-ms-，針對ie內(nèi)核的CSS寫法只洒；
-o-许帐，針對Opera內(nèi)核的CSS寫法；
6.利用Modernizr工具毕谴〕善瑁可以直接使用Modernizr在元素里生成的class名稱，在你的css文件里定義相應(yīng)的屬性以便支持當(dāng)前瀏覽器涝开。
以下工具/名詞是做什么的
- 條件注釋
- 條件注釋(conditional comment)是用于HTML源碼中被IE有條件解釋的語句循帐。條件注釋可被用來向IE提供及隱藏代碼。(注：使用了條件注釋的頁面在IE9中可以正常工作,但在IE10中無法正常工作,IE10不再支持條件注釋)
寫法： <!--[if IE 6] <div class="layout">內(nèi)容</div> <![endif]-->
注意非IE下的寫法
<!--[if !IE]><!--> <div class="layout"></div> <!--<![endif]
- IE Hack
由于不同廠商的瀏覽器舀武，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等拄养，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7银舱，對CSS的解析認(rèn)識不完全一樣瘪匿，因此會導(dǎo)致生成的頁面效果不一樣跛梗，得不到我們所需要的頁面效果。這個(gè)時(shí)候我們就需要針對不同的瀏覽器去寫不同的CSS棋弥，讓它能在不同的瀏覽器中也能得到我們想要的頁面效果核偿。
IEhack是針對Microsoft Internet Explorer瀏覽器的各個(gè)版本對CSS解析不同所進(jìn)行的兼容寫法。
- js 能力檢測
- html5shiv.js
- https://github.com/aFarkas/html5shiv
- 針對IE瀏覽器比較好的解決方案是html5shiv顽染。html5shiv主要解決HTML5提出的新的元素不被IE6-8識別漾岳，這些新元素不能作為父節(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è)快速仁锯、輕量的 polyfill耀找，用于為 IE6-8 以及其它不支持 [CSS3] Media Queries 的瀏覽器提供媒體查詢的 min-width 和 [max-width] 特性翔悠，實(shí)現(xiàn)[響應(yīng)式網(wǎng)頁設(shè)計(jì)]（Responsive Web Design）业崖。
- css reset
- 背景：早起的瀏覽器支持和解析CSS的規(guī)范不同，導(dǎo)致渲染頁面時(shí)效果不一樣蓄愁，引起很多兼容性問題双炕。
- 按照需求，合理的對css樣式進(jìn)行重置撮抓。reset 的目的妇斤，是將所有的瀏覽器的自帶樣式重置掉，這樣更易于保持各瀏覽器渲染的一致性丹拯。
- 注意：
*{margin:0,padding:0}暴力清零css reset方式站超。
- normalize.css
- https://github.com/necolas/normalize.css/
- Normalize.css 是一個(gè)可定制的 CSS 文件，使瀏覽器呈現(xiàn)的所有元素乖酬，更一致和符合現(xiàn)代標(biāo)準(zhǔn);是在現(xiàn)代瀏覽器環(huán)境下對于CSS reset的替代死相。 它正是針對只需要統(tǒng)一的元素樣式。該項(xiàng)目依賴于研究瀏覽器默認(rèn)元素風(fēng)格之間的差異咬像，精確定位需要重置的樣式算撮。
- normalize 的理念則是盡量保留瀏覽器的默認(rèn)樣式，不進(jìn)行太多的重置县昂。
- Modernizr
- https://segmentfault.com/a/1190000003820989s深入理解
- Modernizr.js既能給老版本瀏覽器打補(bǔ)丁肮柜，又能保證新瀏覽器漸進(jìn)增強(qiáng)的用戶體驗(yàn)。
作用：
從實(shí)際操作來看倒彰，Modernizr默認(rèn)做的事情很少审洞，除了（在你選擇的情況下）給不支持html5的標(biāo)簽的瀏覽器，如IE6待讳，7芒澜，8追加一點(diǎn)由Remy Sharp開發(fā)的html5墊片腳本缩赛，使其識別<aside>、<section>等html5元素之外撰糠，它主要做的就是瀏覽器‘功能檢測’酥馍。
因此，它知道瀏覽器是否支持各種html5和css3特性阅酪。
HTML5, CSS3以及相關(guān)技術(shù)（例如canvas和web sockets）帶來了非常有用的特性旨袒，可以讓我們的web程序提升一個(gè)新的level。這些新技術(shù)允許我們只用HTML,CSS和JavaScript就可以構(gòu)建包括在平板和移動設(shè)備上能夠運(yùn)行的多樣化表單頁面术辐。HTML5雖然提供了很多新特性砚尽，但是如果我們不考慮舊版本的瀏覽器就是用這些新技術(shù)也不太現(xiàn)實(shí)，老版本瀏覽器已經(jīng)使用了很多年辉词，我們依然需要考慮這些版本的兼容性問題必孤。本文要解決的問題就是：在我們使用HTML5/CSS3技術(shù)的時(shí)候，如何更好地處理不支持HTML5/CSS3特性的舊版本瀏覽器問題瑞躺。
- postCSS
- https://github.com/postcss/postcss
- PostCSS 可以直觀的理解為：它就是一個(gè)平臺
-
PostCSS 提供了一個(gè)解析器敷搪，它能夠?qū)?CSS 解析成抽象語法樹（AST）〈鄙冢可以理解為下面這個(gè)模型：
239162490-562dd5c1849a6_articlex.png - 它能夠?yàn)?CSS 提供額外的功能赡勘；
- 通過在 PostCSS 這個(gè)平臺上，我們能夠開發(fā)一些插件捞镰，來處理我們的CSS闸与，比如熱門的：autoprefixer；
- 我們能夠使用JavaScript來開發(fā)插件（這點(diǎn)對前端來說很重要）
一般在哪個(gè)網(wǎng)站查詢屬性兼容性岸售？
caniuse.com
