CSS hack
由于各種瀏覽器廠商的之間或不同版本的瀏覽器存在差異菱涤，它們各自對(duì)css的解析認(rèn)識(shí)也存在差異迎膜，由此可能導(dǎo)致生成的頁面效果會(huì)不一樣，不能達(dá)到我們統(tǒng)一頁面效果的需求。所以需要對(duì)不同瀏覽器寫不同的css以達(dá)到我們的需求渴庆。其表現(xiàn)形式大概有以下三種：
- css屬性前綴法（類內(nèi)部Hack）:IE6可以識(shí)別 _ 和 * ，IE7能識(shí)別 * ，IE6~10都識(shí)別 \9 稠鼻，F(xiàn)irefox三個(gè)都不認(rèn)識(shí)。
- 選擇器前綴法
- IE條件注釋法（HTML條件注釋Hack）:是于HTML源碼中被IE有條件解釋的語句酌媒。條件注釋可被用來向IE提供及隱藏代碼。IE10不再支持條件注釋迄靠。
瀏覽器兼容的思路
- 首先需要根據(jù)產(chǎn)品的角度來看（產(chǎn)品的受眾人群秒咨，受眾的瀏覽器比例，選擇效果優(yōu)先還是功能優(yōu)先）
- 再其次考慮成本的問題
- 需要哪些瀏覽器支持哪些效果呢掌挚？
- 根據(jù)兼容需求選擇框架拭荤、庫
Bootstrap(IE8及以上支持)
JQuery1.（IE6及以上支持），JQuery2.（IE9及以上支持）
VUE（IE9及以上支持） - 根據(jù)兼容性適當(dāng)選擇所需的兼容工具
- post css
- 條件注釋疫诽、CSS Hack舅世、js能力檢測(cè)做一些修補(bǔ)
- 漸進(jìn)增強(qiáng)：對(duì)于低版本瀏覽器構(gòu)建頁面旦委，先保證最基本的功能，在針對(duì)高級(jí)瀏覽器進(jìn)行效果雏亚、交互改進(jìn)或追加功能達(dá)到更好地用戶體驗(yàn)
- 優(yōu)雅降級(jí)：從最初就開始構(gòu)建完整的功能缨硝，在針對(duì)低版本瀏覽器進(jìn)行兼容
舉例瀏覽器兼容的寫法
- 清除浮動(dòng)
image.png
- css屬性級(jí)Hack
![]()
image.png
image.png
常見工具或名詞解釋
- 條件注釋
是于HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼罢低。IE10不再支持條件注釋查辩。 - IE Hack
使用特殊的符號(hào)或者方式寫出只有IE瀏覽器可以解析的代碼，有CSS屬性前綴法网持、選擇器前綴法以及IE條件注釋法 - js 能力檢測(cè)
最常用的也是最廣泛使用的客戶端檢測(cè)技術(shù)是能力檢測(cè)（特性檢測(cè)）宜岛。能力檢測(cè)的目標(biāo)不是識(shí)別特定的瀏覽器，而是識(shí)別瀏覽器的能力功舀。使用這種方式無需顧及瀏覽器如何如何萍倡，只需確定瀏覽器是否支持特定的能力，就可以給出相關(guān)的方案辟汰。 -
html5shiv.js
可以在舊版Internet Explorer中使用HTML5部分元素列敲，并為Internet Explorer 6-9，Safari 4.x（和iPhone 3.x）和Firefox 3.x提供基本的HTML5樣式帖汞。 -
respond.js
提供一個(gè)快速和輕量級(jí)（3kb最小化/ 1kb gzipped）腳本戴而，以在不支持CSS3媒體查詢的瀏覽器中啟用響應(yīng)式網(wǎng)頁設(shè)計(jì)，特別是Internet Explorer 8及以下翩蘸。它以這樣的方式編寫所意，它可能會(huì)補(bǔ)丁支持其他不支持的瀏覽器。 -
css reset
瀏覽器支持和理解的CSS規(guī)范不同催首，導(dǎo)致渲染頁面時(shí)效果不一致扶踊，會(huì)出現(xiàn)很多兼容性問題。其目的是將瀏覽器的自帶樣式重置翅帜，易于保持各瀏覽器渲染的一致性。 -
normalize.css
代替css重置命满，其理念是盡量保持瀏覽器的默認(rèn)樣式涝滴，不進(jìn)行太多的重置。參考 -
Modernizr
Modernizr是一套JavaScrip庫胶台，用來偵測(cè)瀏覽器是否支持HTML與CSS3等規(guī)格歼疮。如果瀏覽器不支持，Modernizr會(huì)使用其他的解決方法來進(jìn)行模擬诈唬。參考 -
postCSS
是用JS轉(zhuǎn)換樣式的工具韩脏。這些插件可以使您的CSS，支持變量和混合铸磅，透明未來的CSS語法赡矢，內(nèi)聯(lián)圖像等杭朱。
屬性兼容性查詢
