CSS Hack
- 由于不同廠商的流覽器或某瀏覽器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），對CSS的支持、解析不一樣，導致在不同瀏覽器的環境中呈現出不一致的頁面展現效果。這時，我們為了獲得統一的頁面效果，就需要針對不同的瀏覽器或不同版本寫特定的CSS樣式，我們把這個針對不同的瀏覽器/不同版本寫相應的CSS code的過程，叫做CSS hack
談一談瀏覽器兼容的思路
是否要做兼容
做產品設計時就得先將兼容性做討論，主要從產品的受眾、受眾的瀏覽器占比、以及產品的設計是以特效畫面優先還是功能穩定性優先。兼容的成本
若是創業公司前期可暫時不考慮兼容性有利于快速上線和快速迭代，但是若為政府或大型企業及海外公司，這種需要受眾需要做到什么程度
讓哪些瀏覽器支持哪些效果怎么實現
根據兼容需求選擇技術框架/庫(jquery)
根據兼容需求選擇兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
postCSS
當以上三種方法不夠時，或者自己的頁面比較小，用不到大型的庫，可以用條件注釋、CSS Hack、js 能力檢測做一些修補
逐漸增強和優雅降級
逐漸增強：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗
優雅降級：一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容
區別：優雅降級是從復雜的現狀開始，并試圖減少用戶體驗的供給，而漸進增強則是從一個非常基礎的，能夠起作用的版本開始，并不斷擴充，以適應未來環境的需要。降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶
列舉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標簽結構，使ie低版本瀏覽器可以支持HTML 5!important ,表示高優先級，ie7及以上、firefox都支持，ie6認識帶!important的樣式屬性，但并不理解!important的優先級
選擇器前置法
.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能力檢測
瀏覽器的能力檢測目標不是檢測特定的瀏覽器，而是檢測瀏覽器的能力。這樣，只需要檢測瀏覽器是否支持特定的能力，就可以給出特定的解決方案。這一部分檢測是解決瀏覽器兼容問題的主要檢測。html5shiv.js
用于解決IE9以下版本瀏覽器對HTML5新增標簽不識別，并導致CSS不起作用的問題。
由于IE6/IE7/IE8還有很大一部分用戶，為了讓網站瀏覽者都能正常的訪問HTML5網站，解決方案就有下面兩個：
(1) 為網站創建多套模板，通過程序對User-Agent的判斷給不同的瀏覽器用戶顯示不同的頁面，這樣的維護成本比較高，也失去響應式設計的意義。
(2) 使用Javascript來使不支持HTML5的瀏覽器支持HTML標簽。目前大多網站采用的這種方式（Bootcss官方例子也是如此）。
原理：利用腳本document.createElement(“”)創建對應的腳本，CSS選擇器便可正確應用到該標簽。使用：考慮到IE9是支持html5的，所以直接在HTML頁面的head標簽中添加腳本引用即可。respond.js
讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持查詢。css reset
將瀏覽器的默認樣式全部去掉，就是通過重新定義標簽樣式。“覆蓋”瀏覽器的CSS默認屬性。normalize.css
Normalize.css 是一個可定制的CSS文件，使瀏覽器呈現的所有元素，更一致和符合現代標準。它正是針對只需要統一的元素樣式。該項目依賴于研究瀏覽器默認元素風格之間的差異，精確定位需要重置的樣式。這是一個現代的，HTML5-ready 的CSS重置樣式集。Modernizr
Modernizr 是一個 JavaScript 庫，用于檢測用戶瀏覽器的 HTML5 與 CSS3 特性。
Modernizr 使你可以方便地為各種情況編寫 JavaScript 和 CSS，無論瀏覽器是否支持這些特性。這是處理漸進增強的完美方案。
工作原理
Modernizr 會在頁面加載后立即檢測特性；然后創建一個包含檢測結果的 JavaScript 對象，同時在 html 元素加入方便你調整 CSS 的 class 名。postCSS
PostCSS 是使用 JS 插件來轉換 CSS 的工具，支持變量，混入，未來 CSS 語法，內聯圖像等等。
PostCSS 包括 CSS 解析器，CSS 節點樹 API，一個源映射生成器和一個節點樹 stringifier。
PostCSS是CSS變成JavaScript的數據，使它變成可操作。PostCSS是基于JavaScript插件，然后執行代碼操作。PostCSS自身并不會改變CSS，它只是一種插件，為執行任何的轉變鋪平道路。
