CSS hack
由于不同廠商的流覽器或某瀏覽器的不同版本對CSS的支持、解析不一樣，導致在不同瀏覽器的環(huán)境中呈現出不一致的頁面展現效果累铅。這時糕非，我們?yōu)榱双@得統一的頁面效果蒙具，就需要針對不同的瀏覽器或不同版本寫特定的CSS樣式球榆，我們把這個針對不同的瀏覽器/不同版本寫相應的CSS code的過程，叫做CSS hack禁筏。
瀏覽器兼容的思路
- 要不要做
- 產品的角度（產品受眾持钉、受眾的瀏覽器比例，效果優(yōu)先還是基本功能優(yōu)先等）
- 成本的角度（有無必要去實現某個需求）
- 做到什么程度
——讓瀏覽器支持哪些效果 - 該怎么做
- 根據兼容需求選擇技術框架/庫（jQuery）
- 根據兼容需求選擇兼容工具（html5shiv.js篱昔、respond.js每强、css reset、normalize.css州刽、Modernizr）
- post CSS（自動根據瀏覽器加前綴）
- 條件注釋空执、CSS Hack、JS能力檢測 做一些修補
漸進增強和優(yōu)雅降級
- 漸進增強（progressive enhancement）：針對低版本瀏覽器進行構建頁面怀伦，保證最基本的功能脆烟，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗房待。
- 優(yōu)雅降級（graceful degradation）：一開始就構建完整的功能邢羔，然后再針對低版本瀏覽器進行兼容。
瀏覽器兼容的寫法
- 合適的框架
| 框架 | 支持版本 |
|---|---|
| Bootstrap | ≥ IE8 |
| jQuery 1._ | ≥IE6 |
| jQuery 2._ | ≥IE9 |
| Vue | ≥IE9 |
- 條件注釋
條件注釋（conditional comment）是于HTML源碼中被IE有條件解釋的語句桑孩“莺祝可被用來向IE提供及隱藏代碼。
使用了條件注釋的頁面在IE9中可正常工作流椒，但在IE10中就不行了敏簿。IE10不再支持條件注釋。
| 項目 | 支持版本 | 說明 |
|---|---|---|
! |
[if !IE] |
非IE |
lt |
[if lt IE5.5] |
（less than）小于IE5.5 |
lte |
[if lte IE6] |
（less than or equal）小于等于IE6 |
gt |
[if gt IE5] |
（great than）大于IE5 |
gte |
[if gte IE7 |
（great than or equal）大于等于IE7 |
豎線 |
[if (IE6)豎線(IE7)] |
IE6或IE7 |
PS：“非IE”的注釋比較特殊一些
<!-- [if !IE]><!-- >_____________<!-- <![end if]-->
屬性前綴（即內部Hack）
IE6能識別 _ 和 *
IE7能識別 *
IE6~IE10都能認 " \q "
但是以上宣虾，FireFox都不認識惯裕。選擇器前綴
比如IE6能識別html .class{ }，IE7能識別+html .class{ }或者*:first-child+html .class{ }绣硝。合適的工具
html5shiv.js
respond.js
css reset
normalize.css
Modernizr
一些常見的屬性和寫法
- 常見寫法
.box {
color: red;
_color: blue; /* IE6 */
*color: pink; /* IE6蜻势、7 */
color: yellow\9; /* IE/Edge 6-8 */
}
<!-- [if IE7] >
<link rel="stylesheet" href="IE7.css" type="text/css" />
<!-- [end if] -->
- 常見屬性
| 屬性 | 兼容情況 |
|---|---|
| inline-block | ≥IE8 |
| min-width / min-height | ≥IE8 |
| :before / :after | ≥IE8 |
| div:hover | ≥IE7 |
| background-size | ≥IE9 |
| 圓角 | ≥IE9 |
| 陰影 | ≥IE9 |
| 動畫 / 漸變 | IE10 |
名詞（工具）解釋
- 條件注釋
這是基于HTML源碼中被IE(IE≥9)有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼鹉胖。 - IE Hack
針對IE瀏覽器編寫不同的CSS（屬性前綴法握玛、選擇器前綴法、IE條件注釋法）使得頁面效果在不同版本的IE瀏覽器中達到效果一致甫菠。 - js 能力檢測
瀏覽器的能力檢測目標不是檢測特定的瀏覽器挠铲，而是檢測瀏覽器的能力。這樣寂诱，只需要檢測瀏覽器是否支持特定的能力拂苹，就可以給出特定的解決方案。 - 優(yōu)先檢測達到目的最常用的特性
- 檢測實際用到的屬性
- html5shiv.js
針對不支持HTML5標簽的瀏覽器痰洒，創(chuàng)建并模擬HTML5的標簽的效果并使相應的CSS生效醋寝。 - respond.js
讓 IE6-8 也能實現 CSS3 中的 Media Query（媒體查詢）功能搞挣，實現響應式設計。 - CSS Reset
- CSS Reset 簡單地說就是重置瀏覽器的 CSS 默認屬性音羞。
- 因為瀏覽器的品種很多囱桨，每個瀏覽器的默認樣式也是不同的，比如 標簽嗅绰，在 IE 瀏覽器舍肠、Firefox 瀏覽器以及 Safari 瀏覽器中的樣式都是不同的，所以窘面，通過重置 button 標簽的 CSS 屬性翠语，然后再將它統一定義，就可以產生相同的顯示效果财边。
- CSS Reset 內容方法不同肌括，但功能大同小異，都是起到重置的作用酣难，所以說 CSS Reset 是根據個人需求不同可以按需自定義的
- Normalize.css
一個很小的CSS文件谍夭，讓不同瀏覽器在渲染瀏覽器時形式更加統一，但它在默認的HTML元素樣式上提供了跨瀏覽器的高度一致性憨募。是一種CSS reset的替代方案紧索。 - 保護有用的瀏覽器默認樣式：而不是完全去掉它們
- 一般化的樣式：為大部分HTML元素提供
- 修復瀏覽器自身的bug：并保證各瀏覽器的一致性
- 優(yōu)化CSS可用性：用一些小技巧
- 解釋代碼：注釋和詳細的文檔
- Modernizr
Modernizr 使你可以方便地為各種情況編寫 JavaScript 和 CSS，無論瀏覽器是否支持這些特性菜谣。這是處理漸進增強的完美方案珠漂。
Modernizr 會在頁面加載后立即檢測特性；然后創(chuàng)建一個包含檢測結果的 JavaScript 對象尾膊，同時在 html 元素加入方便你調整 CSS 的 class 名媳危。 - PostCSS
PostCSS是一個使用 JavaScript 插件來轉換CSS的工具，通過PostCSS這個平臺冈敛，我們自己也能夠開發(fā)一些插件济舆，來處理CSS。
