CSS hack
CSS hack由于不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對CSS的解析認識不完全一樣，因此會導致生成的頁面效果不一樣，得不到我們所需要的頁面效果。 這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能夠同時兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果。簡單的說，CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器。當然，我們也可以反過來利用CSS hack為不同版本的瀏覽器定制編寫不同的CSS效果。
CSS hack有3種表現形式，CSS屬性前綴法、選擇器前綴法以及IE條件注釋法（即HTML頭部引用if IE）Hack，實際項目中CSS Hack大部分是針對IE瀏覽器不同版本之間的表現差異而引入的。
- 屬性前綴法(即類內部Hack)：例如 IE6能識別下劃線"_"和星號" * "，IE7能識別星號" * "，但不能識別下劃線""，IE6~IE10都認識"\9"
- 選擇器前綴法(即選擇器Hack)
- IE條件注釋法(即HTML條件注釋Hack)：針對所有IE(注：IE10+已經不再支持條件注釋)： ，針對IE6及以下版本：。這類Hack不僅對CSS生效，對寫在判斷語句里面的所有代碼都會生效
瀏覽器兼容的思路
首先考慮要不要兼容
- 產品的角度（產品的受眾、受眾的瀏覽器比例、效果優先還是基本功能優先）
- 成本的角度 (有無必要做某件事)
兼容到什么程度
- 讓哪些瀏覽器支持哪些效果
如何做
- 根據兼容需求選擇技術框架/庫(jquery)
- 根據兼容需求選擇兼容工具
- 條件注釋、CSS Hack、js 能力檢測做一些修補
瀏覽器兼容寫法
- 條件注釋
使用Modernizr
<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]-->
項目 范例 說明
！ [if !IE] 非IE
lt [if lt IE 5.5] 小于IE 5.5
lte [if lte IE 6] 小于等于IE6
gt [if gt IE 5] 大于 IE5
gte [if gte IE 7] 大于等于IE7
| [if (IE 6)|(IE 7)] IE6或者IE7
- 屬性前綴
.box{
color: red; _color: blue; /*ie6*/
*color: pink; /*ie67*/
}
- 選擇器前綴
*html *前綴只對IE6生效
*+html *+前綴只對IE7生效 - 屬性后綴
.box{
color: yellow\9; /*ie/edge 6-8*/
}
- 使用Modernizr
利用Modernizr的能力檢測，對標簽不存在的能力特別優化。 - 條件注釋結合類選擇器整體優化。
<!DOCTYPE html>
<!--[if IEMobile 7 ]> <html dir="ltr" lang="en-US"class="no-js iem7"> <![endif]-->
<!--[if lt IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie6 oldie"> <![endif]-->
<!--[if IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie7 oldie"> <![endif]-->
<!--[if IE 8 ]> <html dir="ltr" lang="en-US" class="no-js ie8 oldie"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html dir="ltr" lang="en-US" class="no-js"><!--<![endif]-->
工具/名詞
條件注釋：條件注釋 是于HTML源碼中被 IE 有條件解釋的語句。條件注釋可被用來向 IE提供及隱藏代碼。 條件注釋最初于微軟的 Internet Explorer 5瀏覽器中出現，并且直至 Internet Explorer 9 均支持。微軟已宣布于IE10停止支持
IE Hack：針對IE瀏覽器編寫不同的CSS的讓IE能夠正常渲染的過程
js 能力檢測：瀏覽器的能力檢測目標不是檢測特定的瀏覽器，而是檢測瀏覽器的能力。這樣，只需要檢測瀏覽器是否支持特定的能力，就可以給出特定的解決方案。這一部分檢測是解決瀏覽器兼容問題的主要檢測
html5shiv.js：用于解決IE9以下版本瀏覽器對HTML5新增標簽不識別，并導致CSS不起作用的問題。所以我們在使用過程中，想要讓低版本的瀏覽器，即IE9以下的瀏覽器支持，那么這款html5shiv.js是一個非常好的選擇
respond.js：Respond.js 是一個小腳本，用于為 IE6-8 以及其它不支持 CSS3 媒體查詢功能的瀏覽器提供媒體查詢的 min-width 和 max-width 特性，實現響應式網頁設計
css reset：將瀏覽器的默認樣式全部去掉，更準確說就是通過重新定義標簽樣式。“覆蓋”瀏覽器的CSS默認屬性。最最簡單的說法就是把瀏覽器提供的默認樣式覆蓋掉！這就是CSS reset
normalize.css：Normalize.css 是一個可以定制的CSS文件，它讓不同的瀏覽器在渲染網頁元素的時候形式更統一。
它可以：
- 保留有用的默認值，不同于許多 CSS reset 的簡單粗暴。
- 標準化的樣式，適用范圍廣的元素
- 糾正錯誤和常見的瀏覽器的不一致性
- 一些細微的改進，提高了易用性
- 使用詳細的注釋來解釋代碼
Modernizr：Modernizr 使你可以方便地為各種情況編寫 JavaScript 和 CSS，無論瀏覽器是否支持這些特性。這是處理漸進增強的完美方案。
Modernizr 會在頁面加載后立即檢測特性；然后創建一個包含檢測結果的 JavaScript 對象，同時在 html 元素加入方便你調整 CSS 的 class 名
postCSS：它可以被理解為一個平臺，可以讓一些插件在上面跑，它提供了一個解析器，可以將CSS解析成抽象語法樹，通過PostCSS這個平臺，我們能夠開發一些插件，來處理CSS。熱門插件如autoprefixer，它可以幫我們處理兼容問題，只需正常寫CSS，autoprefixer可以幫我的自動生成兼容性代碼
