關于瀏覽器的兼容問題
1. 什么是 CSS hack
根據(jù)百度的簡述：CSS hack由于不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等殃姓，或者是同一廠商的瀏覽器的不同版本袁波，如IE6和IE7，對CSS的解析認識不完全一樣蜗侈，因此會導致生成的頁面效果不一樣篷牌，得不到我們所需要的頁面效果。 這個時候我們就需要針對不同的瀏覽器去寫不同的CSS踏幻，讓它能夠同時兼容不同的瀏覽器枷颊，能在不同的瀏覽器中也能得到我們想要的頁面效果。
我們可以簡單的認為是该面，CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器夭苗。
CSS hack
CSS Hack大致有3種表現(xiàn)形式:
- CSS屬性前綴法
- 選擇器前綴法
- IE條件注釋法（即HTML頭部引用if IE）Hack
實際項目中CSS Hack大部分是針對IE瀏覽器不同版本之間的表現(xiàn)差異而引入的。
屬性前綴法(即類內(nèi)部Hack)：
- 例如 IE6能識別下劃線"—"和星號" * "隔缀，IE7能識別星號" * "题造，但不能識別下劃線"—"，IE6~IE10都認識"\9"猾瘸，但firefox前述三個都不能認識
- 選擇器前綴法(即選擇器Hack)
- IE條件注釋法(即HTML條件注釋Hack)：
針對所有IE(注：IE10+已經(jīng)不再支持條件注釋)： 界赔，針對IE6及以下版本：。這類Hack不僅對CSS生效牵触，對寫在判斷語句里面的所有代碼都會生效
2. 談一談瀏覽器兼容的思路
在大體上主要分為以下幾個步驟
- 要不要做
- 產(chǎn)品的角度
- 成本的角度
- 要做到什么程度
需要哪些的瀏覽器支持
- 如何做
- 根據(jù)兼容性選擇庫&框架
- 根據(jù)兼容性選擇兼容性工具
- postCSS
- 條件注釋淮悼、CSS Hack、js 能力檢測做一些修補
- 方法思路
- 漸進增強(progressive enhancement): 針對低版本瀏覽器進行構建頁面揽思，保證最基本的功能袜腥，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗
- 優(yōu)雅降級(graceful degradation): 一開始就構建完整的功能绰更，然后再針對低版本瀏覽器進行兼容瞧挤。
注：stackoverflow-漸進增強和優(yōu)雅降級的區(qū)別
3. 列舉5種以上瀏覽器兼容的寫法
- 屬性前綴法(即類內(nèi)部Hack)：
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie67*/
color: yellow\9; /*ie/edge 6-8*/
}
- IE條件注釋法(即HTML條件注釋Hack)
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
- 選擇器前綴法(即選擇器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有效等等
- 條件注釋結合類選擇器整體優(yōu)化
<!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工具
5. 以下工具/名詞是做什么的
條件注釋
條件注釋 是于HTML源碼中被 IE 有條件解釋的語句锡宋。條件注釋可被用來向 IE提供及隱藏代碼儡湾。 條件注釋最初于微軟的 Internet Explorer 5瀏覽器中出現(xiàn)，并且直至 Internet Explorer 9 均支持执俩。微軟已宣布于IE10停止支持徐钠。具體代碼如上已給出。IE Hack
針對IE瀏覽器編寫不同的CSS的讓IE能夠正常渲染的過程js 能力檢測
能力檢測又稱特性檢測役首。能力檢測的目的不是識別具體的瀏覽器尝丐，而是識別瀏覽器的能力显拜。
能力檢測的目的應該是根據(jù)你需要的特性來選擇問題的解決方案，而不是檢測用戶在用什么瀏覽器爹袁。而且在檢測時要保證你要用到的能力確實存在远荠，自己不要做過多的推測，代碼也不要做過多的判斷失息。
兩個重要的概念：
第一個概念是先檢測達成目的的最常用的特性譬淳。先檢測最常用的特性，可以保證代碼最優(yōu)化盹兢，因為在多數(shù)情況下都可以避免測試多個條件邻梆。
第二個概念是必須測試實際要用到的特性。一個特性存在绎秒，不一定意味著另一個特性也存在浦妄。html5shiv.js
IE 9之前的版本幾乎不支持HTML5元素和其它HTML5特性。
HTML5 Shiv支持在舊版Internet Explorer（IE9之前）中使用HTML5細分元素见芹，并為Internet Explorer 6-9剂娄，Safari 4.x（和iPhone 3.x）和Firefox 3.x提供基本的HTML5樣式。respond.js
響應式布局玄呛，理想狀態(tài)是宜咒，對PC/移動各種終端進行響應。媒體查詢的支持程度是IE9+以及其他現(xiàn)代的瀏覽器把鉴，但是IE8在市場當中仍然占據(jù)了比較大量的市場份額故黑，使我們不得不進行IE低端瀏覽器的考慮。那么如何在IE6~8瀏覽器中兼容響應式布局呢庭砍？這里我們需要借助這樣一個文件：respond.js
Respond.js 是一個快速场晶、輕量的 polyfill，用于為 IE6-8 以及其它不支持 CSS3 Media Queries 的瀏覽器提供媒體查詢的 min-width 和 max-width 特性怠缸，實現(xiàn)響應式網(wǎng)頁設計诗轻。css reset
css reset是通過重新定義標簽樣式，把瀏覽器的默認樣式覆蓋掉扳炬，以便保持個瀏覽器渲染的一致性恨樟。normalize.css
normalize.css是reset.css的替代方案养晋，保留有用的瀏覽器默認樣式零酪，同時進行一些bug的修復灯谣。Modernizr
Modernizr是一套JavaScript 庫辜窑，用來偵測瀏覽器是否支持 CSS3 或 HTML5 功能支持情況等所禀。如果瀏覽器不支持褂策，Modernizr會使用其他的解決方法來進行模擬揪惦。
Modernizr 會在頁面加載后立即檢測特性再愈；然后創(chuàng)建一個包含檢測結果的 JavaScript 對象，同時在 html 元素加入方便你調(diào)整 CSS 的 class 名钳枕。postCSS
PostCSS是一個使用JS插件轉(zhuǎn)換樣式的工具衔沼。這些插件可以刪除您的CSS，支持變量和混合昔瞧，透明未來的CSS語法指蚁，內(nèi)聯(lián)圖像等自晰。
PostCSS不是預處理器本身; 它不會轉(zhuǎn)換CSS凝化。事實上酬荞，它本身根本不做任何事混巧。它所做的是提供一個CSS解析器和一個框架糟把，用于創(chuàng)建可以分析，lint牲剃，處理資產(chǎn)遣疯，優(yōu)化，創(chuàng)建回退凿傅，否則轉(zhuǎn)換解析的CSS的插件缠犀。PostCSS將CSS解析為抽象語法樹（AST），通過一系列插件將其傳遞聪舒，然后PostCSS核心為插件更改的樹生成一個新的CSS字符串辨液。。如果你熟悉JavaScript工具箱残，那么你可以認為PostCSS 為CSS的Babel滔迈。
PostCSS目前有200多個插件止吁，其中很多在PostCSS GitHub頁面上列出，而其他的可以在有用的PostCSS目錄postcss.parts中找到燎悍。PostCSS可以集成在大多數(shù)構建工具中敬惦，包括Gulp，Grunt谈山，webpack或npm俄删。
PostCSS被行業(yè)領導者使用，包括維基百科奏路，Twitter畴椰，阿里巴巴和JetBrains。該 Autoprefixer PostCSS插件是最流行的CSS處理器之一鸽粉。
