CSS Hack
- 由于不同廠商的流覽器或某瀏覽器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等）友雳，對CSS的支持、解析不一樣，導(dǎo)致在不同瀏覽器的環(huán)境中呈現(xiàn)出不一致的頁面展現(xiàn)效果。這時(shí)牡整，我們?yōu)榱双@得統(tǒng)一的頁面效果，就需要針對不同的瀏覽器或不同版本寫特定的CSS樣式敏沉，我們把這個(gè)針對不同的瀏覽器/不同版本寫相應(yīng)的CSS code的過程果正，叫做CSS hack
談一談瀏覽器兼容的思路
是否要做兼容
做產(chǎn)品設(shè)計(jì)時(shí)就得先將兼容性做討論，主要從產(chǎn)品的受眾盟迟、受眾的瀏覽器占比秋泳、以及產(chǎn)品的設(shè)計(jì)是以特效畫面優(yōu)先還是功能穩(wěn)定性優(yōu)先。兼容的成本
若是創(chuàng)業(yè)公司前期可暫時(shí)不考慮兼容性有利于快速上線和快速迭代攒菠，但是若為政府或大型企業(yè)及海外公司迫皱，這種需要受眾需要做到什么程度
讓哪些瀏覽器支持哪些效果怎么實(shí)現(xiàn)
根據(jù)兼容需求選擇技術(shù)框架/庫(jquery)
根據(jù)兼容需求選擇兼容工具(html5shiv.js、respond.js、css reset卓起、normalize.css和敬、Modernizr)
postCSS
當(dāng)以上三種方法不夠時(shí)，或者自己的頁面比較小戏阅，用不到大型的庫昼弟，可以用條件注釋、CSS Hack奕筐、js 能力檢測做一些修補(bǔ)
逐漸增強(qiáng)和優(yōu)雅降級
逐漸增強(qiáng)：針對低版本瀏覽器進(jìn)行構(gòu)建頁面舱痘，保證最基本的功能，然后再針對高級瀏覽器進(jìn)行效果离赫、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)
優(yōu)雅降級：一開始就構(gòu)建完整的功能芭逝，然后再針對低版本瀏覽器進(jìn)行兼容
區(qū)別：優(yōu)雅降級是從復(fù)雜的現(xiàn)狀開始，并試圖減少用戶體驗(yàn)的供給渊胸，而漸進(jìn)增強(qiáng)則是從一個(gè)非逞ⅲ基礎(chǔ)的，能夠起作用的版本開始翎猛，并不斷擴(kuò)充胖翰，以適應(yīng)未來環(huán)境的需要。降級（功能衰減）意味著往回看办成；而漸進(jìn)增強(qiáng)則意味著朝前看泡态，同時(shí)保證其根基處于安全地帶
列舉5種以上的瀏覽器兼容寫法
- -moz- 搂漠、 -webkit-迂卢、 -o-、 -ms- 前綴
- 條件注釋法（ie10以上不再支持條件注釋）
<!--[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]-->
html5shiv.js
Html5shiv桐汤，指的是HTML 5標(biāo)簽結(jié)構(gòu)而克，使ie低版本瀏覽器可以支持HTML 5!important ,表示高優(yōu)先級，ie7及以上怔毛、firefox都支持员萍，ie6認(rèn)識帶!important的樣式屬性，但并不理解!important的優(yōu)先級
選擇器前置法
.box{
color: red;
_color: blue; /*ie6能識別*/
*color: pink; /*ie67都能識別*/
color: yellow\9; /*ie/edge 6-8都能識別*/
}
以下工具／名稱是做什么的
- 條件注釋
條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語句拣度。條件注釋可被用來向IE提供及隱藏代碼
<!--[if IE]>用于 IE <![endif]-->
<!--[if IE 6]>用于 IE6 <![endif]-->
<!--[if IE 7]>用于 IE7 <![endif]-->
<!--[if IE 8]>用于 IE8 <![endif]-->
<!--[if IE 9]>用于 IE9 <![endif]-->
<!--[if gt IE 6]> 用于 IE6 以上版本<![endif]-->
<!--[if lte IE 7]> 用于 IE7或更低版本 <![endif]-->
<!--[if gte IE 8]>用于 IE8 或更高版本 <![endif]-->
<!--[if lt IE 9]>用于 IE9 以下版本<![endif]-->
<!--[if !IE]> -->用于非 IE <!-- <![endif]-->
IE Hack
使用特殊的符號或者方式寫出只有IE瀏覽器可以解析的代碼碎绎，有CSS屬性前綴法、選擇器前綴法以及IE條件注釋法抗果。js能力檢測
瀏覽器的能力檢測目標(biāo)不是檢測特定的瀏覽器筋帖，而是檢測瀏覽器的能力。這樣冤馏，只需要檢測瀏覽器是否支持特定的能力日麸，就可以給出特定的解決方案。這一部分檢測是解決瀏覽器兼容問題的主要檢測逮光。html5shiv.js
用于解決IE9以下版本瀏覽器對HTML5新增標(biāo)簽不識別代箭，并導(dǎo)致CSS不起作用的問題墩划。
由于IE6/IE7/IE8還有很大一部分用戶，為了讓網(wǎng)站瀏覽者都能正常的訪問HTML5網(wǎng)站嗡综，解決方案就有下面兩個(gè)：
(1) 為網(wǎng)站創(chuàng)建多套模板乙帮，通過程序?qū)ser-Agent的判斷給不同的瀏覽器用戶顯示不同的頁面，這樣的維護(hù)成本比較高极景，也失去響應(yīng)式設(shè)計(jì)的意義蚣旱。
(2) 使用Javascript來使不支持HTML5的瀏覽器支持HTML標(biāo)簽。目前大多網(wǎng)站采用的這種方式（Bootcss官方例子也是如此）戴陡。
原理：利用腳本document.createElement(“”)創(chuàng)建對應(yīng)的腳本塞绿，CSS選擇器便可正確應(yīng)用到該標(biāo)簽。使用：考慮到IE9是支持html5的恤批，所以直接在HTML頁面的head標(biāo)簽中添加腳本引用即可异吻。respond.js
讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持查詢。css reset
將瀏覽器的默認(rèn)樣式全部去掉喜庞，就是通過重新定義標(biāo)簽樣式诀浪。“覆蓋”瀏覽器的CSS默認(rèn)屬性延都。normalize.css
Normalize.css 是一個(gè)可定制的CSS文件雷猪，使瀏覽器呈現(xiàn)的所有元素，更一致和符合現(xiàn)代標(biāo)準(zhǔn)晰房。它正是針對只需要統(tǒng)一的元素樣式求摇。該項(xiàng)目依賴于研究瀏覽器默認(rèn)元素風(fēng)格之間的差異，精確定位需要重置的樣式殊者。這是一個(gè)現(xiàn)代的与境，HTML5-ready 的CSS重置樣式集。Modernizr
Modernizr 是一個(gè) JavaScript 庫猖吴，用于檢測用戶瀏覽器的 HTML5 與 CSS3 特性摔刁。
Modernizr 使你可以方便地為各種情況編寫 JavaScript 和 CSS，無論瀏覽器是否支持這些特性海蔽。這是處理漸進(jìn)增強(qiáng)的完美方案共屈。
工作原理
Modernizr 會在頁面加載后立即檢測特性；然后創(chuàng)建一個(gè)包含檢測結(jié)果的 JavaScript 對象党窜，同時(shí)在 html 元素加入方便你調(diào)整 CSS 的 class 名拗引。postCSS
PostCSS 是使用 JS 插件來轉(zhuǎn)換 CSS 的工具，支持變量刑然，混入寺擂，未來 CSS 語法，內(nèi)聯(lián)圖像等等。
PostCSS 包括 CSS 解析器怔软，CSS 節(jié)點(diǎn)樹 API垦细，一個(gè)源映射生成器和一個(gè)節(jié)點(diǎn)樹 stringifier。
PostCSS是CSS變成JavaScript的數(shù)據(jù)挡逼，使它變成可操作括改。PostCSS是基于JavaScript插件，然后執(zhí)行代碼操作家坎。PostCSS自身并不會改變CSS嘱能，它只是一種插件，為執(zhí)行任何的轉(zhuǎn)變鋪平道路虱疏。
