1橡疼、什么是 CSS hack
由于不同廠商的瀏覽器风秤，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等又活，或者是同一廠商的瀏覽器的不同版本佃却，如IE6和IE7岔激，對CSS的解析認(rèn)識不完全一樣，因此會導(dǎo)致生成的頁面效果不一樣遇八，得不到我們所需要的頁面效果矛绘。為了能夠統(tǒng)一或盡量顯示同樣的結(jié)果，我們需針對不同瀏覽器寫不同的css刃永，這樣的過程就叫做css hack货矮。
2、談一談瀏覽器兼容的思路
一斯够、要不要做
- 產(chǎn)品的受眾囚玫，及受眾使用的各瀏覽器的比例，效果優(yōu)先還是基本功能優(yōu)先读规。
- 成本的考慮抓督，投入產(chǎn)出比。
二束亏、做到什么程度
- 兼容哪些瀏覽器铃在，兼容到什么版本，讓哪些瀏覽器支持哪些效果碍遍。
- 逐漸增強(qiáng)：針對低版本瀏覽器進(jìn)行構(gòu)建頁面定铜，保證最基本的功能，然后再針對高級瀏覽器進(jìn)行效果怕敬、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗揣炕。
- 優(yōu)雅降級：一開始就構(gòu)建完整的功能，然后再針對低版本瀏覽器進(jìn)行兼容东跪。
三畸陡、怎么做
- 根據(jù)兼容需求選擇技術(shù)框架矮烹，比如：
Bootstrap (>=ie8)
jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
Vue (>= ie9) - 根據(jù)兼容需求選擇兼容工具h(yuǎn)tml5shiv.js、respond.js罩锐、css reset奉狈、Modernizr、postCSS等涩惑。
- 條件注釋仁期、CSS Hack、js 能力檢測做一些修補(bǔ)竭恬。
3跛蛋、列舉5種以上瀏覽器兼容的寫法
- IE 條件注釋
<!--[if IE]>用于 IE <![endif]-->
<!--[if IE 6]>用于 IE6 <![endif]-->
<!--[if IE 7]>用于 IE7 <![endif]-->
<!--[if IE 8]>用于 IE8 <![endif]-->
<!--[if IE 9]>用于 IE9 <![endif]-->
<!--[if gt IE 6]> 用于 IE6 以上版本<![endif]-->
<!--[if lte IE 7]> 用于 IE7或更低版本 <![endif]-->
<!--[if gte IE 8]>用于 IE8 或更高版本 <![endif]-->
<!--[if lt IE 9]>用于 IE9 以下版本<![endif]-->
<!--[if !IE]> -->用于非 IE <!-- <![endif]-->
- CSS屬性前綴法
“_″IE6 生效
"*" IE6 7生效
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
“\9\0″ 只對IE9/IE10生效痊硕，是IE9/10的hack
Trident內(nèi)核：主要代表為IE瀏覽器,前綴為-ms
Gecko內(nèi)核：主要代表為Firefox,前綴為-moz
Presto內(nèi)核：主要代表為Opera,前綴為-o
Webkit內(nèi)核：產(chǎn)要代表為Chrome和Safari,前綴為-webkit
- 選擇器前綴法
針對一些頁面表現(xiàn)不一致或者需要特殊對待的瀏覽器赊级，在CSS選擇器前加上一些只有某些特定瀏覽器才能識別的前綴進(jìn)行hack（針對瀏覽器之間的表現(xiàn)差異而引入的，利用瀏覽器的bug來進(jìn)行針對性處理）
例如：
*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有效
- 條件注釋法和類選擇器相結(jié)合
<!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]-->
- 使用Modernizr工具
4岔绸、以下工具/名詞是做什么的
- 條件注釋
條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語句理逊。條件注釋可被用來向IE提供及隱藏代碼。
- IE Hack
針對IE瀏覽器的不同版本寫不同的CSS盒揉，CSS Hack大致有3種表現(xiàn)形式晋被，CSS屬性前綴法、選擇器前綴法以及IE條件注釋法（即HTML頭部引用if IE）Hack刚盈，實際項目中CSS Hack大部分是針對IE瀏覽器不同版本之間的表現(xiàn)差異而引入的羡洛。 - js 能力檢測
瀏覽器的能力檢測目標(biāo)不是檢測特定的瀏覽器，而是檢測瀏覽器的能力藕漱。這樣欲侮，只需要檢測瀏覽器是否支持特定的能力，就可以給出特定的解決方案肋联。這一部分檢測是解決瀏覽器兼容問題的主要檢測威蕉。 - html5shiv.js
用于解決IE9以下版本瀏覽器對HTML5新增標(biāo)簽不識別，并導(dǎo)致CSS不起作用的問題牺蹄。所以我們在使用過程中忘伞，想要讓低版本的瀏覽器薄翅，即IE9以下的瀏覽器支持沙兰，那么這款html5shiv.js是一個非常好的選擇！ - respond.js
Respond.js 是一個快速翘魄、輕量的polyfill鼎天，用于為 IE6-8 以及其它不支持 CSS3 Media Queries 的瀏覽器提供媒體查詢的 min-width 和 max-width 特性，實現(xiàn)響應(yīng)式網(wǎng)頁設(shè)計（Responsive Web Design）暑竟。 - css reset
將瀏覽器的默認(rèn)樣式全部去掉斋射，更準(zhǔn)確說就是通過重新定義標(biāo)簽樣式育勺。“覆蓋”瀏覽器的CSS默認(rèn)屬性罗岖。最最簡單的說法就是把瀏覽器提供的默認(rèn)樣式覆蓋掉涧至！這就是CSS reset。 - normalize.css
Normalize.css 是一個可以定制的CSS文件桑包，它讓不同的瀏覽器在渲染網(wǎng)頁元素的時候形式更統(tǒng)一南蓬。
Normalize.css 能干什么： - 保留有用的默認(rèn)值，不同于許多 CSS 的重置
- 標(biāo)準(zhǔn)化的樣式哑了，適用范圍廣的元素赘方。
- 糾正錯誤和常見的瀏覽器的不一致性。
- 一些細(xì)微的改進(jìn)弱左，提高了易用性窄陡。
- 使用詳細(xì)的注釋來解釋代碼。
- Modernizr
Modernizr是一個 JavaScript 庫拆火，用于檢測用戶瀏覽器的 HTML5 與 CSS3 特性跳夭。 - 使用炫酷新穎的 web 技術(shù)是一件很有趣的事情，但你不得不面對落后的瀏覽器们镜。Modernizr 使你可以方便地為各種情況編寫 JavaScript 和 CSS优妙，無論瀏覽器是否支持這些特性。這是處理漸進(jìn)增強(qiáng)的完美方案憎账。
- Modernizr 會在頁面加載后立即檢測特性套硼；然后創(chuàng)建一個包含檢測結(jié)果的 JavaScript 對象，同時在 html 元素加入方便你調(diào)整 CSS 的 class 名胞皱。
- postCSS
PostCSS 是使用 JS 插件來轉(zhuǎn)換 CSS 的工具邪意，支持變量，混入反砌，未來 CSS 語法雾鬼，內(nèi)聯(lián)圖像等等。
