什么是 CSS hack
由于不同廠商（如Internet Explorer,Safari,Mozilla Firefox,Chrome等）、不同版本（如IE6和IE7）的瀏覽器，對CSS的解析認識不完全一樣，因此會導致生成的頁面效果不一樣，得不到我們所需要的頁面效果。
這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能在不同的瀏覽器中也能得到我們想要的頁面效果。
簡單的說，CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器。當然，我們也可以反過來利用CSS hack為不同版本的瀏覽器定制編寫不同的CSS效果。
談一談瀏覽器兼容的思路
- 要不要做：
產品的角度：（產品的受眾、受眾的瀏覽器比例、效果優先還是基本功能優先）
成本的角度： (有無必要做某件事) - 做到什么程度：
讓哪些瀏覽器支持哪些效果 - 如何做
1.根據兼容需求選擇技術框架/庫(jquery)
2.根據兼容需求選擇兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
3.使用條件注釋、CSS Hack、js 能力檢測做一些修補。
列舉5種以上瀏覽器兼容的寫法
- 屬性前綴法(即類內部Hack)：例如 IE6能識別下劃線""和星號" * "，IE7能識別星號" * "，但不能識別下劃線""，IE6~IE10都認識"\9"，但firefox前述三個都不能認識
- 選擇器前綴法(即選擇器Hack)：比如IE6能識別*html .class{}，IE7能識別+html .class{}
- IE條件注釋法(即HTML條件注釋Hack)：針對所有IE(注：IE10+已經不再支持條件注釋)： ；針對IE6及以下版本：。這類Hack不僅對CSS生效，對寫在判斷語句里面的所有代碼都會生效。
- 使用利用Modernizr工具:
運行的時候它會在html元素上添加一批CSS的class名稱，這些class名稱標記當前瀏覽器支持哪些特性和不支持哪些特性，支持的特性就直接顯示該天特性的名稱作為一個class（例:canvas,websockets），不支持的特性顯示的class是“no-特性名稱”。如果class里面有no-名稱的，可以在css里面添加（.no-名稱）相應的屬性來實現一些其他效果。 - 使用ie條件注釋和html5shiv.js，respond.js結合
<!--[if lt IE9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![end if]-->
以下工具/名詞是做什么的
- 條件注釋
條件注釋是于HTML源碼中被 IE 有條件解釋的語句。條件注釋可被用來向 IE提供及隱藏代碼。 - IE Hack
針對IE瀏覽器編寫不同的CSS的讓IE能夠在不同的正常渲染的過程 - js 能力檢測
檢測瀏覽器的能力檢測目標不是檢測特定的瀏覽器，而是檢測瀏覽器的能力。這樣，只需要檢測瀏覽器是否支持特定的能力，就可以給出特定的解決方案。這一部分檢測是解決瀏覽器兼容問題的主要檢測。 - html5shiv.js
由于IE6/IE7/IE8還有很大一部分用戶，為了讓網站瀏覽者都能正常的訪問HTML5網站，解決方案就有下面
使用Javascript來使不支持HTML5的瀏覽器支持HTML標簽。目前大多網站采用的這種方式（Bootcss官方例子也是如此）。
利用腳本document.createElement(“”)創建對應的腳本，CSS選擇器便可正確應用到該標簽。
考慮到IE9是支持html5的，所以直接在HTML頁面的head標簽中添加腳本引用即可。 - respond.js
Respond.js讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持查詢，實現響應式網頁設計 - css reset
重置瀏覽器的默認樣式，更準確說就是通過重新定義標簽樣式，“覆蓋”瀏覽器的CSS默認屬性。 - normalize.css
是一個可以定制的CSS文件，它讓不同的瀏覽器在渲染網頁元素的時候形式更統一。
主要功能：
保護有用的瀏覽器默認樣式而不是完全去掉它們
一般化的樣式：為大部分HTML元素提供
修復瀏覽器自身的bug并保證各瀏覽器的一致性
優化CSS可用性：用一些小技巧
解釋代碼：用注釋和詳細的文檔來 - Modernizr
Modernizr 會在頁面加載后立即檢測特性；然后創建一個包含檢測結果的 JavaScript 對象，同時在 html 元素加入方便你調整 CSS 的 class 名
Modernizr是一個開源的JS庫，它使得那些基于訪客瀏覽器的不同（指對新標準支持性的差異）而開發不同級別體驗的設計師的工作變得更為簡單。它使得設計師可以在支持HTML5和CSS3的瀏覽器中充分利用HTML5和CSS3的特性進行開發，同時又不會犧牲其他不支持這些新技術的瀏覽器的控制。
當你在網頁中嵌入Modernizr的腳本時，它會檢測當前瀏覽器是否支持CSS3的特性，比如 @font-face、border-radius、 border-image、box-shadow、rgba() 等，同時也會檢測是否支持HTML5的 特性——比如audio、video、本地儲存、和新的 標簽的類型和屬性等。在獲取到這些信息的基礎上，你可以在那些支持這些功能的瀏覽器上使用它們，來決定是否創建一個基于JS的 fallback，或者對那些不支持的瀏覽器進行簡單的優雅降級。另外，Modernizr還可以令IE支持對HTML5的元素應用CSS樣式，這樣開發者就可以立即使用這些更富有語義化的標簽了。 - postCSS
postCSS本身是一個功能比較單一的工具。它提供了一種方式用 JavaScript 代碼來處理 CSS。它負責把 CSS 代碼解析成抽象語法樹結構（Abstract Syntax Tree，AST），再交由插件來進行處理。插件基于 CSS 代碼的 AST 所能進行的操作是多種多樣的，比如可以支持變量和混入（mixin），增加瀏覽器相關的聲明前綴，或是把使用將來的 CSS 規范的樣式規則轉譯（transpile）成當前的 CSS 規范支持的格式。從這個角度來說，PostCSS 的強大之處在于其不斷發展的插件體系。目前 PostCSS 已經有 200 多個功能各異的插件。開發人員也可以根據項目的需要，開發出自己的 PostCSS 插件。
一般在哪個網站查詢屬性兼容性？
caniuse.com 查CSS屬性兼容
browserhacks 查 Hack 的寫法
瀏覽器市場份額
