CSS hack

由于各種瀏覽器廠商的之間或不同版本的瀏覽器存在差異，它們各自對css的解析認(rèn)識也存在差異，由此可能導(dǎo)致生成的頁面效果會不一樣，不能達(dá)到我們統(tǒng)一頁面效果的需求。所以需要對不同瀏覽器寫不同的css以達(dá)到我們的需求。其表現(xiàn)形式大概有以下三種：

• css屬性前綴法（類內(nèi)部Hack）:IE6可以識別 _ 和 * ，IE7能識別 * ，IE6~10都識別 \9 ，F(xiàn)irefox三個都不認(rèn)識。
• 選擇器前綴法
• IE條件注釋法（HTML條件注釋Hack）:是于HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼。IE10不再支持條件注釋。

瀏覽器兼容的思路

1. 首先需要根據(jù)產(chǎn)品的角度來看（產(chǎn)品的受眾人群，受眾的瀏覽器比例，選擇效果優(yōu)先還是功能優(yōu)先）
2. 再其次考慮成本的問題
3. 需要哪些瀏覽器支持哪些效果呢？
4. 根據(jù)兼容需求選擇框架、庫
   Bootstrap(IE8及以上支持)
   JQuery1._{（IE6及以上支持），JQuery2.}（IE9及以上支持）
   VUE（IE9及以上支持）
5. 根據(jù)兼容性適當(dāng)選擇所需的兼容工具
6. post css
7. 條件注釋、CSS Hack、js能力檢測做一些修補(bǔ)
8. 漸進(jìn)增強(qiáng)：對于低版本瀏覽器構(gòu)建頁面，先保證最基本的功能，在針對高級瀏覽器進(jìn)行效果、交互改進(jìn)或追加功能達(dá)到更好地用戶體驗
9. 優(yōu)雅降級：從最初就開始構(gòu)建完整的功能，在針對低版本瀏覽器進(jìn)行兼容

舉例瀏覽器兼容的寫法

• 清除浮動

image.png

• css屬性級Hack

image.png

常見工具或名詞解釋

• 條件注釋
  是于HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼。IE10不再支持條件注釋。
• IE Hack
  使用特殊的符號或者方式寫出只有IE瀏覽器可以解析的代碼，有CSS屬性前綴法、選擇器前綴法以及IE條件注釋法
• js 能力檢測
  　最常用的也是最廣泛使用的客戶端檢測技術(shù)是能力檢測（特性檢測）。能力檢測的目標(biāo)不是識別特定的瀏覽器，而是識別瀏覽器的能力。使用這種方式無需顧及瀏覽器如何如何，只需確定瀏覽器是否支持特定的能力，就可以給出相關(guān)的方案。
• html5shiv.js
  可以在舊版Internet Explorer中使用HTML5部分元素，并為Internet Explorer 6-9，Safari 4.x（和iPhone 3.x）和Firefox 3.x提供基本的HTML5樣式。
• respond.js
  提供一個快速和輕量級（3kb最小化/ 1kb gzipped）腳本，以在不支持CSS3媒體查詢的瀏覽器中啟用響應(yīng)式網(wǎng)頁設(shè)計，特別是Internet Explorer 8及以下。它以這樣的方式編寫，它可能會補(bǔ)丁支持其他不支持的瀏覽器。
• css reset
  瀏覽器支持和理解的CSS規(guī)范不同，導(dǎo)致渲染頁面時效果不一致，會出現(xiàn)很多兼容性問題。其目的是將瀏覽器的自帶樣式重置，易于保持各瀏覽器渲染的一致性。
• normalize.css
  代替css重置，其理念是盡量保持瀏覽器的默認(rèn)樣式，不進(jìn)行太多的重置。參考
• Modernizr
  Modernizr是一套JavaScrip庫，用來偵測瀏覽器是否支持HTML與CSS3等規(guī)格。如果瀏覽器不支持，Modernizr會使用其他的解決方法來進(jìn)行模擬。參考
• postCSS
  是用JS轉(zhuǎn)換樣式的工具。這些插件可以使您的CSS，支持變量和混合，透明未來的CSS語法，內(nèi)聯(lián)圖像等。
  屬性兼容性查詢