什么是 CSS hack

由于不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對CSS的解析認識不完全一樣，因此會導致生成的頁面效果不一樣，得不到我們所需要的頁面效果。
這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能在不同的瀏覽器中也能得到我們想要的頁面效果。

談一談瀏覽器兼容的思路

1. 要不要做
   從產品的角度考慮，我們的產品受眾群體，年齡段。
   若為年輕群體娛樂性網站可以考慮一些炫酷的效果。
   若為政府機構的辦事網站則要以基本功能為主，更側重于實用性。
   受眾的瀏覽器比例：是以老舊的IE6-8為主還是以功能更全面的chrome，firefox為主
   優先效果或者基本功能要考慮周到；
2. 成本的角度 (有無必要做某件事) 若受眾群體為中老年，瀏覽器以IE6-8為主，則無太大必要制作相對華麗的效果
3. 做到什么程度
   讓哪些瀏覽器支持哪些效果
4. 如何做
   根據兼容需求選擇技術框架/庫(jquery)
   根據兼容需求選擇兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
   postCSS
   條件注釋、CSS Hack、js 能力檢測做一些修補
5. 漸進增強(progressive enhancement): 針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗
   優雅降級 (graceful degradation): 一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。

列舉5種以上瀏覽器兼容的寫法

1. 合適的框架
   Bootstrap (>=ie8)
   jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
   Vue (>= ie9)
   ...
2. 條件注釋
   是于HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼。

<!--[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]-->

3 . CSS屬性前綴法
屬性前綴法(即類內部Hack)：例如 IE6能識別下劃線""和星號" * "，IE7能識別星號" * "，但不能識別下劃線""，IE6~IE10都認識"\9"，但firefox前述三個都不能認識

box{
 color: red; 
_color: blue; /*ie6*/
 *color: pink; /*ie67*/ 
color: yellow\9; /*ie/edge 6-8*/
}

4.選擇器前綴法
5.使用modernizr

<script src="Scripts/Modernizr.js" type="text/javascript"></script>```
## 以下工具/名詞是做什么的
  - 條件注釋
于HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼。
  - IE Hack
為了兼容IE系列瀏覽器的CSS hack。
  - js 能力檢測
瀏覽器的能力檢測目標不是檢測特定的瀏覽器，而是檢測瀏覽器的能力。這樣，只需要檢測瀏覽器是否支持特定的能力，就可以給出特定的解決方案。這一部分檢測是解決瀏覽器兼容問題的主要檢測。
即使用JS檢測瀏覽器是否支持特定的功能來確定解決方案
  - html5shiv.js
用于解決IE9以下版本瀏覽器對HTML5新增標簽不認識的情況，模擬創建一些在IE6-8中沒有的標簽
  - respond.js
用于為 IE6-8 以及其它不支持 CSS3 媒體查詢功能的瀏覽器提供媒體查詢的 min-width 和 max-width 特性，實現響應式網頁設計。
  - css reset
css默認樣式清除與重置
  - normalize.css
相對于css reset的全部清除，normalize.css相對較為溫和，保護了有價值的瀏覽器默認值并且修復了瀏覽器的bug
  - Modernizr
Modernizr 是一個 JavaScript 庫，用于檢測用戶瀏覽器的 HTML5 與 CSS3 特性。
Modernizr 使你可以方便地為各種情況編寫 JavaScript 和 CSS，無論瀏覽器是否支持這些特性。這是處理漸進增強的較為完美方案。
Modernizr 會在頁面加載后立即檢測特性；然后創建一個包含檢測結果的 JavaScript 對象，同時在 html 元素加入方便你調整 CSS 的 class 名。
  - postCSS
postCSS是一個后處理器，它提供了一個解析器，可以將CSS解析成抽象語法樹，通過PostCSS這個平臺，我們能夠開發一些插件。
它能解決的問題有：
它能夠為 CSS 提供額外的功能；
通過在 PostCSS 這個平臺上，我們能夠開發一些插件，來處理我們的CSS，比如熱門的：autoprefixer
我們能夠使用JavaScript來開發插件
比如熱門插件如autoprefixer，它可以幫我們處理兼容問題，只需寫標準語法的CSS，autoprefixer可以幫我的自動生成兼容性代碼

## 一般在哪個網站查詢屬性兼容性？
[can i use](http://caniuse.com/)