參考
1.史上最全的CSS hack方式一覽
2.前端的瑞士軍刀：Modernizr.js
3.CSS hack-wikipedia
4.CSS hack-baidu
5.關(guān)于CSS Reset 那些事（一）之 歷史演變與Normalize.css
一谍咆、什么是 CSS hack？
瀏覽器因類型般又、版本的不同谊娇，對(duì)CSS的支持程度表制、解析不一致。這導(dǎo)致了同樣的CSS在不同瀏覽器下的頁面效果不同。為了獲得統(tǒng)一的頁面效果代虾，針對(duì)不同的瀏覽器或不同版本編寫特定的CSS樣式的過程歉摧，叫做CSS hack艇肴。
二腔呜、瀏覽器兼容的思路
- 是否需要
- 產(chǎn)品角度：產(chǎn)品受眾及其使用瀏覽器比例，效果優(yōu)先還是功能優(yōu)先再悼；
- 成本角度：有無必要核畴。
- 兼容程度
- 最低兼容瀏覽器類型或版本，需要實(shí)現(xiàn)怎樣的效果冲九。
- 怎樣實(shí)現(xiàn)
- 合適的技術(shù)框架或庫谤草；
- 明確要漸進(jìn)增強(qiáng)還是優(yōu)雅降級(jí)；
- 選擇合適的兼容工具莺奸；(html5shiv.js咖刃、respond.js、css reset憾筏、normalize.css嚎杨、Modernizr)
- CSS hack（條件注釋等）、js能力檢測氧腰。
三枫浙、列舉5種以上瀏覽器兼容的寫法
- 條件注釋（IE 9及以下）
- IE 6時(shí)，
<p>You are using Internet Explorer 6.</p>有效古拴； - 除IE 9及以下版本之外的其他瀏覽器有效箩帚；
- IE 8時(shí)，載入ie8only.css黄痪。
- IE 6時(shí)，
<!--[if IE 6]>
<p>You are using Internet Explorer 6.</p>
<![endif]-->
<!--[if !IE]><!-->
<script>alert(1);</script>
<!--<![endif]-->
<!--[if IE 8]>
<link href="ie8only.css" rel="stylesheet">
<![endif]-->
- 屬性前綴法
.box{
color: red;
color: yellow\9; /*ie 6~10*/
*color: pink; /*ie 6~7*/
-color: blue; /*ie 6*/
}
- 選擇器前綴法
/*for Chrome/Safari*/
@media screen and (-webkit-min-device-pixel-ratio:0){
.hacktest {
background-color:gray;
}
}
- 利用js根據(jù)瀏覽器UA添加屬性值
//js在html標(biāo)簽中嵌入用戶瀏覽器的UA
var htmlObj = document.documentElement;
htmlObj.setAttribute('data-useragent',navigator.userAgent);
htmlObj.setAttribute('data-platform', navigator.platform );
/*將特定CSS匹配到所檢測到的用戶瀏覽器*/
html[data-useragent*='MSIE 10.0'] #id {
color: #F00;
}
- 利用工具如：Modernizr
應(yīng)用modernizr.js后紧帕，運(yùn)行時(shí)會(huì)生成當(dāng)前瀏覽器支持和不支持的特性
<html class=" js no-flexbox canvas canvastext no-webgl no-touch geolocation
postmessage no-websqldatabase no-indexeddb hashchange no-history
draganddrop no-websockets rgba hsla multiplebgs backgroundsize
no-borderimage borderradius boxshadow no-textshadow opacity
no-cssanimations no-csscolumns no-cssgradients no-cssreflections
csstransforms no-csstransforms3d no-csstransitions fontface
generatedcontent video audio localstorage sessionstorage
no-webworkers no-applicationcache svg inlinesvg smil svgclippaths">
然后我們可以針對(duì)支持與不支持分別編寫樣式，如box-shadow：
.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;
}
四桅打、以下工具/名詞是做什么的
條件注釋
條件注釋只在IE中生效是嗜，是IE瀏覽器私有的代碼，是一個(gè)類似if判斷的語法注釋塊挺尾。IE Hack
就是針對(duì)低版本IE瀏覽器編寫的只被其識(shí)別的樣式等鹅搪，以此保持頁面效果與其他瀏覽器的一致性。js 能力檢測
利用js來檢測當(dāng)前瀏覽器是否支持一些特性或方法遭铺。html5shiv.js
在IE9及以下的瀏覽器中生成可用的html5中的新標(biāo)簽丽柿。respond.js
是一個(gè)快速、輕量的 polyfill魂挂，用于為 IE6-8 以及其它不支持 CSS3 Media Queries 的瀏覽器提供媒體查詢的 min-width 和 max-width 特性甫题，實(shí)現(xiàn)響應(yīng)式網(wǎng)頁設(shè)計(jì)。css reset
通過重新定義標(biāo)簽樣式涂召，將瀏覽器默認(rèn)樣式覆蓋坠非。normalize.css
保留有用的瀏覽器默認(rèn)樣式，為html元素的默認(rèn)樣式提供了跨瀏覽器的高度一致性芹扭；同時(shí)也修復(fù)了瀏覽器的一些bug麻顶。Modernizr
檢測瀏覽器是否支持CSS或js的特性。如果支持舱卡，那么開發(fā)人員就可以充分利用這些特性做一些工作辅肾，反之，開發(fā)人員也好提供一個(gè)平穩(wěn)退化的替代方案轮锥。postCSS
postCSS是一個(gè)js插件轉(zhuǎn)換樣式表的工具矫钓。這些插件能夠檢驗(yàn)?zāi)愕腃SS、支持變量和混合舍杜，轉(zhuǎn)化CSS3的新特性語法新娜、行內(nèi)圖片等。
