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能力檢測做一些修補

• 漸進增強(progressive enhancement): 針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗

• 優雅降級 (graceful degradation): 一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容

瀏覽器兼容的寫法

兼容性寫法參考 browserhacks

CSS Hack大致有3種表現形式，CSS屬性前綴法、選擇器前綴法以及IE條件注釋法（即HTML頭部引用if IE）Hack，實際項目中CSS Hack大部分是針對IE瀏覽器不同版本之間的表現差異而引入的。

屬性前綴法(即類內部Hack)：例如 IE6能識別下劃線""和星號" * "，IE7能識別星號" * "，但不能識別下劃線""，IE6~IE10都認識"\9"，但firefox前述三個都不能認識。
選擇器前綴法(即選擇器Hack)：例如 IE6能識別html .class{}，IE7能識別+html .class{}或者*:first-child+html .class{}。
IE條件注釋法(即HTML條件注釋Hack)：針對所有IE(注：IE10+已經不再支持條件注釋)： ，針對IE6及以下版本： 。這類Hack不僅對CSS生效，對寫在判斷語句里面的所有代碼都會生效。
　　
CSS hack書寫順序，一般是將適用范圍廣、被識別能力強的CSS定義在前面。

條件注釋法 這種方式是IE瀏覽器專有的Hack方式，微軟官方推薦使用的hack方式。
只有IE8及IE8以下的瀏覽器才會顯示中間的script代碼
<!--[if lte IE 8]>
<script> ~~~~~</script>
<![endif]-->

只在IE8上不生效
<!--[if ! IE8]>
這段文字在非IE8瀏覽器顯示
<![endif]-->

在非IE瀏覽器上生效
<!--[if !IE]>
這段文字只在非IE瀏覽器顯示
<![endif]-->


屬性前綴法是在CSS樣式屬性名前加上一些只有特定瀏覽器才能識別的hack前綴，以達到預期的頁面展現效果。
.demo{
color: red\0;       IE8 9 10 生效
}
.demo2{
color: pink\9\0;     IE9 10 生效
}
說明：在標準模式中
“_″是IE6專有的hack   _color: red;
*background-color:black; /* IE6, IE7 */ 
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
“\9\0″ 只對IE9/IE10生效，是IE9/10的hack
現在不用管IE 6 7了

選擇器前綴法是針對一些頁面表現不一致或者需要特殊對待的瀏覽器， 在CSS選擇器前加上一些只有某些特定瀏覽器才能識別的前綴進行hack。

*html *前綴只對IE6生效
*+html *+前綴只對IE7生效
@media screen\9{...}只對IE6/7生效
@media \0screen {body { background: red; }}只對IE8有效
@media \0screen,screen\9{body { background: blue; }}只對IE6/7/8有效
@media screen\0 {body { background: green; }} 只對IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只對IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對IE10有效

有關CSS hack 不錯的博客

• 條件注釋
  于HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼；使用了條件注釋的頁面在IE9中可正常工作，但在IE10中無法正常工作，IE10不再支持條件注釋
• IE Hack
  針對IE瀏覽器編寫不同的CSS的讓IE能夠正常渲染的過程
• js 能力檢測
  瀏覽器的能力檢測目標不是檢測特定的瀏覽器，而是檢測瀏覽器的能力。這樣，只需要檢測瀏覽器是否支持特定的能力，就可以給出特定的解決方案。這一部分檢測是解決瀏覽器兼容問題的主要檢測
• html5shiv.js
  解決IE(IE6/IE7/IE8)不識別HTML5標簽 并導致CSS不起作用問題
• respond.js
  Respond.js是一個快速、輕量的腳本（3kb minified / 1kb gzipped），它的目標是使得那些不支持CSS3 Media Queryes特性的瀏覽器能夠支持響應性設計，尤其是小于等于8的ie瀏覽器。它是用這樣的方式，盡可能的修補那些不支持的瀏覽器來支持
• css reset
  什么是CSS Reset。HTML標簽在瀏覽器中都有默認的樣式，例如p標簽有上下邊距，strong標簽有字體加粗樣式等。不同瀏覽器的默認樣式之間存在差別，例如ul默認帶有縮進樣式，在IE下，它的縮進是由margin實現的，而在Firefox下卻是由padding實現的。開發時瀏覽器的默認樣式可能會給我們帶來多瀏覽器兼容性問題，影響開發效率。解決方法是一開始就通過重新定義標簽樣式，“覆蓋”瀏覽器的CSS默認屬性。
• normalize.css
  Normalize.css 是一個可以定制的CSS文件，為HTML5準備的reset.css的替代品。它可以使元素的渲染在多個瀏覽器下都能保持一致并且符合規范。它所瞄準的，也都是些需要規范化的樣式。
  css reset和normalize.css的區別
• Modernizr
  Modernizr 使你可以方便地為各種情況編寫 JavaScript 和 CSS，無論瀏覽器是否支持這些特性。這是處理漸進增強的完美方案；Modernizr 會在頁面加載后立即檢測特性；然后創建一個包含檢測結果的 JavaScript 對象，同時在 html 元素加入方便你調整 CSS 的 class 名
• postCSS
  PostCSS 是一個使用 JS 插件來轉換 CSS 的工具。這些插件可以支持使用變量，混入(mixin)，轉換未來的 CSS 語法，內聯圖片等操作。
  PostCSS 可以將 CSS 轉變成 JavaScript 可以操作的數據格式。基于 JS 寫的插件可以完成上面所說的那些操作。PostCSS 本身不會對 CSS 代碼作任何修改，她只是為插件提供了一些接口，方便插件完成它們各自的功能
  postCSS

通常在 can i use 上查詢兼容性