-
什么是CSS hack汇荐？
不同廠商的瀏覽器日熬，或同一廠商不同版本的瀏覽器铃在，對(duì)css的解析識(shí)別是不一樣的，因此同樣的一份css代碼碍遍，在不同瀏覽器下會(huì)有不一樣的表現(xiàn)定铜。這時(shí)為了達(dá)到我們想要頁(yè)面效果，就要為不同的瀏覽器寫(xiě)不一樣的css代碼怕敬，讓它能兼容不同的瀏覽器揣炕，在不同的瀏覽器上得到我們想要的效果，這就是CSS hack东跪。
簡(jiǎn)單的說(shuō)畸陡，CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器。
-
談一談瀏覽器兼容的思路虽填。
1.要不要做兼容丁恭？
對(duì)于一個(gè)網(wǎng)站，我們要大致了解它的受眾人群斋日，受眾的瀏覽器牲览，要確定這個(gè)網(wǎng)站是效果優(yōu)先還是基本功能優(yōu)先，里面的有些效果是否有必要實(shí)現(xiàn)等等恶守，通過(guò)這些來(lái)確定瀏覽器是否要做兼容第献。
2.做到什么程度贡必？
兼容IE6？兼容IE7庸毫？還是都兼容仔拟？
3.選擇合適的工具進(jìn)行開(kāi)發(fā)
根據(jù)兼容需求選擇技術(shù)框架/庫(kù)(jquery等)；
根據(jù)兼容需求選擇兼容工具(html5shiv.js飒赃、respond.js利花、css reset、normalize.css载佳、Modernizr
postCSS）晋被；
條件注釋、CSS Hack刚盈、js 能力檢測(cè)做一些修補(bǔ)。
總結(jié)：
漸進(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): 一開(kāi)始就構(gòu)建完整的功能肋联，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。
-
列舉5種以上瀏覽器兼容的寫(xiě)法刁俭。
1.條件注釋
條件注釋是在HTML源碼中被IE有條件解釋的語(yǔ)句橄仍。條件注釋可被用來(lái)向IE提供及隱藏代碼棕洋。
條件注釋對(duì)IE的版本和IE非IE有優(yōu)秀的區(qū)分能力法褥，是web設(shè)計(jì)中常用的hack方法包吝。
<!--[if IE 6]> /*如果是IE6脓魏，則<p>生效*/
<p>You are using Internet Explorer 6.</p>
<![endif]-->
<!--[if !IE]><!--> /*如果是非IE瘪阁，則<script>生效*/
<script>alert(1);</script>
<!--<![endif]-->
<!--[if IE 8]> /*如果是IE8操禀，則<link>生效*/
<link href="ie8only.css" rel="stylesheet">
<![endif]-->
注意：IE10以后不再支持條件注釋隧枫。
| 項(xiàng)目 | 示例 | 說(shuō)明 |
|---|---|---|
| 纬乍！ | <if !IE> | 非IE |
| lt | <if lt IE6> | 小于IE6 |
| lte | <if lte IE6> | 小于等于IE6 |
| gt | <if gt IE6> | 大于IE6 |
| gte | <if gte IE6> | 大于等于IE6 |
2.css屬性前綴法
IE6能識(shí)別下劃線""和星號(hào)" * "第晰，IE7能識(shí)別星號(hào)" * "锁孟，但不能識(shí)別下劃線""，IE6~IE10都認(rèn)識(shí)"\9"茁瘦，但firefox前述三個(gè)都不能認(rèn)識(shí)品抽。因此我們可以利用這些特性，針對(duì)不同瀏覽器添加只有該瀏覽器能識(shí)別的css代碼甜熔，完成hack
示例：
/*在不同瀏覽器下有不一樣的顏色表現(xiàn)*/
.box{
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie67*/
color: yellow\9; /*ie/edge 6-8*/
}
/*在firefox總是綠色的圆恤，IE6總是紅色的*/
div{
background:green;/*forfirefox*/
*background:red;/*forIE6*/(bothIE6&&IE7)
}
3.選擇器前綴法
與屬性前綴法類似，針對(duì)一些頁(yè)面表現(xiàn)不一致或者需要特殊對(duì)待的瀏覽器腔稀，在CSS選擇器前加上一些只有某些特定瀏覽器才能識(shí)別的前綴進(jìn)行hack哑了。
/*常見(jiàn)的選擇器hack*/
*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.使用Mordernizr.js
Modernizr 是一個(gè)用來(lái)檢測(cè)瀏覽器功能支持情況的 JavaScript 庫(kù)赘方，運(yùn)行的時(shí)候它會(huì)在html元素上添加一批CSS的class名稱，這些class名稱標(biāo)記當(dāng)前瀏覽器支持哪些特性和不支持哪些特性弱左，支持的特性就直接顯示該天特性的名稱作為一個(gè)class（例如:canvas,websockets）窄陡，不支持的特性顯示的class是“no-特性名稱”（例如：no-flexbox），下面這段代碼是運(yùn)行在Chrome下的效果：
<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage
websqldatabase indexeddb hashchange history draganddrop websockets
rgba hsla multiplebgs backgroundsize borderimage borderradius
boxshadow textshadow opacity cssanimations csscolumns cssgradients
cssreflections csstransforms csstransforms3d csstransitions fontface
generatedcontent video audio localstorage sessionstorage webworkers
applicationcache svg inlinesvg smil svgclippaths">
它顯示了chrom瀏覽器下支持和不支持的特性拆火。
下面是它的一個(gè)運(yùn)用示例跳夭，在支持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;
}
如果瀏覽器支持boxshadow们镜，Modernizr就會(huì)在html上添加class=boxshadow币叹，對(duì)應(yīng)到css中生成陰影，如果不支持模狭，則生成class=no-boxshadow颈抚，對(duì)應(yīng)到css中生成邊框。
-
以下工具/名詞是做什么的嚼鹉？
條件注釋
條件注釋是在HTML源碼中被IE有條件解釋的語(yǔ)句贩汉。條件注釋可被用來(lái)向IE提供及隱藏代碼。
條件注釋對(duì)IE的版本和IE非IE有優(yōu)秀的區(qū)分能力锚赤，是web設(shè)計(jì)中常用的hack方法匹舞。
<!--[if IE 6]> /*如果是IE6，則<p>生效*/
<p>You are using Internet Explorer 6.</p>
<![endif]-->
<!--[if !IE]><!--> /*如果是非IE线脚，則<script>生效*/
<script>alert(1);</script>
<!--<![endif]-->
<!--[if IE 8]> /*如果是IE8赐稽，則<link>生效*/
<link href="ie8only.css" rel="stylesheet">
<![endif]-->
IE hack
針對(duì)IE，對(duì)css進(jìn)行hack浑侥，保證css能在IE下被正常解析識(shí)別姊舵。
JS 能力檢測(cè)
用JS對(duì)瀏覽器支持什么特性進(jìn)行檢測(cè)，針對(duì)某些特性寓落，給出特定的解決方案蠢莺，這是解決瀏覽器兼容的一種檢測(cè)。
html5shiv.js
IE瀏覽器由于對(duì)html5不能很好的支持（IE9以上部分支持零如，IE6/IE7/IE8不支持）躏将，導(dǎo)致許多用html5編寫(xiě)的網(wǎng)站不能用IE正常訪問(wèn)。html5shiv.js是一個(gè)js庫(kù)考蕾，它通過(guò)模擬的方式祸憋，使IE可以正常訪問(wèn)html5編寫(xiě)的頁(yè)面。
respond.js
IE6-IE8不支持媒體查詢肖卧，使用respond.js可以使IE6-IE8支持媒體查詢蚯窥。
css reset
對(duì)瀏覽器的默認(rèn)樣式進(jìn)行重置
normalize.css
normalize.css是css reset發(fā)展的產(chǎn)物，如果說(shuō)reset是把瀏覽器的一切默認(rèn)樣式都進(jìn)行重置，那么normalize.css的理念則是盡量保留瀏覽器的默認(rèn)樣式拦赠，不進(jìn)行太多的重置巍沙。
Normalize.css 只是一個(gè)很小的CSS文件，但它在默認(rèn)的HTML元素樣式上提供了跨瀏覽器的高度一致性荷鼠。相比于傳統(tǒng)的CSS Reset句携，Normalize.css是一種現(xiàn)代的、為HTML5準(zhǔn)備的優(yōu)質(zhì)替代方案允乐。Normalize.css現(xiàn)在已經(jīng)被用于Twitter Bootstrap矮嫉、HTML5 Boilerplate、GOV.UK牍疏、Rdio蠢笋、CSS Tricks 以及許許多多其他框架、工具和網(wǎng)站上鳞陨。
Modernizr
Modernizr 是一個(gè)用來(lái)檢測(cè)瀏覽器功能支持情況的 JavaScript 庫(kù)昨寞，運(yùn)行的時(shí)候它會(huì)在html元素上添加一批CSS的class名稱，這些class名稱標(biāo)記當(dāng)前瀏覽器支持哪些特性和不支持哪些特性厦滤，支持的特性就直接顯示該天特性的名稱作為一個(gè)class（例如:canvas,websockets）援岩，不支持的特性顯示的class是“no-特性名稱”（例如：no-flexbox），下面這段代碼是運(yùn)行在Chrome下的效果：
<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage
websqldatabase indexeddb hashchange history draganddrop websockets
rgba hsla multiplebgs backgroundsize borderimage borderradius
boxshadow textshadow opacity cssanimations csscolumns cssgradients
cssreflections csstransforms csstransforms3d csstransitions fontface
generatedcontent video audio localstorage sessionstorage webworkers
applicationcache svg inlinesvg smil svgclippaths">
postCSS
postCSS可以理解為后編譯器馁害，它提供了一個(gè)平臺(tái)，在平臺(tái)上我們可以用js開(kāi)發(fā)一些插件（如autoprefixer）來(lái)處理我們的css文件蹂匹，我們只要正常的編寫(xiě)css碘菜，postcss就可以幫我們自動(dòng)生成具有兼容性的css。
-
一般在哪個(gè)網(wǎng)站查詢屬性兼容性限寞？
caniuse.com
