什么是 CSS hack
由于不同廠商（如Internet Explorer,Safari,Mozilla Firefox,Chrome等）杀饵、不同版本（如IE6和IE7）的瀏覽器，對(duì)CSS的解析認(rèn)識(shí)不完全一樣，因此會(huì)導(dǎo)致生成的頁(yè)面效果不一樣，得不到我們所需要的頁(yè)面效果优床。
這個(gè)時(shí)候我們就需要針對(duì)不同的瀏覽器去寫不同的CSS访得，讓它能在不同的瀏覽器中也能得到我們想要的頁(yè)面效果。
簡(jiǎn)單的說浙值，CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器恳不。當(dāng)然，我們也可以反過來利用CSS hack為不同版本的瀏覽器定制編寫不同的CSS效果开呐。
談一談瀏覽器兼容的思路
- 要不要做：
產(chǎn)品的角度：（產(chǎn)品的受眾烟勋、受眾的瀏覽器比例、效果優(yōu)先還是基本功能優(yōu)先）
成本的角度： (有無必要做某件事) - 做到什么程度：
讓哪些瀏覽器支持哪些效果 - 如何做
1.根據(jù)兼容需求選擇技術(shù)框架/庫(kù)(jquery)
2.根據(jù)兼容需求選擇兼容工具(html5shiv.js筐付、respond.js卵惦、css reset、normalize.css瓦戚、Modernizr)
3.使用條件注釋沮尿、CSS Hack、js 能力檢測(cè)做一些修補(bǔ)较解。
列舉5種以上瀏覽器兼容的寫法
- 屬性前綴法(即類內(nèi)部Hack)：例如 IE6能識(shí)別下劃線""和星號(hào)" * "畜疾，IE7能識(shí)別星號(hào)" * "，但不能識(shí)別下劃線""印衔，IE6~IE10都認(rèn)識(shí)"\9"啡捶，但firefox前述三個(gè)都不能認(rèn)識(shí)
- 選擇器前綴法(即選擇器Hack)：比如IE6能識(shí)別*html .class{}，IE7能識(shí)別+html .class{}
- IE條件注釋法(即HTML條件注釋Hack)：針對(duì)所有IE(注：IE10+已經(jīng)不再支持條件注釋)： 奸焙；針對(duì)IE6及以下版本：瞎暑。這類Hack不僅對(duì)CSS生效，對(duì)寫在判斷語句里面的所有代碼都會(huì)生效与帆。
- 使用利用Modernizr工具:
運(yùn)行的時(shí)候它會(huì)在html元素上添加一批CSS的class名稱了赌，這些class名稱標(biāo)記當(dāng)前瀏覽器支持哪些特性和不支持哪些特性，支持的特性就直接顯示該天特性的名稱作為一個(gè)class（例:canvas,websockets）玄糟，不支持的特性顯示的class是“no-特性名稱”勿她。如果class里面有no-名稱的，可以在css里面添加（.no-名稱）相應(yīng)的屬性來實(shí)現(xiàn)一些其他效果茶凳。 - 使用ie條件注釋和html5shiv.js嫂拴，respond.js結(jié)合
<!--[if lt IE9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![end if]-->
以下工具/名詞是做什么的
- 條件注釋
條件注釋是于HTML源碼中被 IE 有條件解釋的語句。條件注釋可被用來向 IE提供及隱藏代碼贮喧。 - IE Hack
針對(duì)IE瀏覽器編寫不同的CSS的讓IE能夠在不同的正常渲染的過程 - js 能力檢測(cè)
檢測(cè)瀏覽器的能力檢測(cè)目標(biāo)不是檢測(cè)特定的瀏覽器筒狠，而是檢測(cè)瀏覽器的能力。這樣箱沦，只需要檢測(cè)瀏覽器是否支持特定的能力辩恼，就可以給出特定的解決方案。這一部分檢測(cè)是解決瀏覽器兼容問題的主要檢測(cè)。 - html5shiv.js
由于IE6/IE7/IE8還有很大一部分用戶灶伊，為了讓網(wǎng)站瀏覽者都能正常的訪問HTML5網(wǎng)站疆前，解決方案就有下面
使用Javascript來使不支持HTML5的瀏覽器支持HTML標(biāo)簽。目前大多網(wǎng)站采用的這種方式（Bootcss官方例子也是如此）聘萨。
利用腳本document.createElement(“”)創(chuàng)建對(duì)應(yīng)的腳本竹椒，CSS選擇器便可正確應(yīng)用到該標(biāo)簽。
考慮到IE9是支持html5的米辐，所以直接在HTML頁(yè)面的head標(biāo)簽中添加腳本引用即可胸完。 - respond.js
Respond.js讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持查詢，實(shí)現(xiàn)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì) - css reset
重置瀏覽器的默認(rèn)樣式翘贮，更準(zhǔn)確說就是通過重新定義標(biāo)簽樣式赊窥，“覆蓋”瀏覽器的CSS默認(rèn)屬性。 - normalize.css
是一個(gè)可以定制的CSS文件狸页，它讓不同的瀏覽器在渲染網(wǎng)頁(yè)元素的時(shí)候形式更統(tǒng)一锨能。
主要功能：
保護(hù)有用的瀏覽器默認(rèn)樣式而不是完全去掉它們
一般化的樣式：為大部分HTML元素提供
修復(fù)瀏覽器自身的bug并保證各瀏覽器的一致性
優(yōu)化CSS可用性：用一些小技巧
解釋代碼：用注釋和詳細(xì)的文檔來 - Modernizr
Modernizr 會(huì)在頁(yè)面加載后立即檢測(cè)特性；然后創(chuàng)建一個(gè)包含檢測(cè)結(jié)果的 JavaScript 對(duì)象芍耘，同時(shí)在 html 元素加入方便你調(diào)整 CSS 的 class 名
Modernizr是一個(gè)開源的JS庫(kù)址遇，它使得那些基于訪客瀏覽器的不同（指對(duì)新標(biāo)準(zhǔn)支持性的差異）而開發(fā)不同級(jí)別體驗(yàn)的設(shè)計(jì)師的工作變得更為簡(jiǎn)單。它使得設(shè)計(jì)師可以在支持HTML5和CSS3的瀏覽器中充分利用HTML5和CSS3的特性進(jìn)行開發(fā)齿穗，同時(shí)又不會(huì)犧牲其他不支持這些新技術(shù)的瀏覽器的控制傲隶。
當(dāng)你在網(wǎng)頁(yè)中嵌入Modernizr的腳本時(shí)，它會(huì)檢測(cè)當(dāng)前瀏覽器是否支持CSS3的特性窃页，比如 @font-face、border-radius复濒、 border-image脖卖、box-shadow、rgba() 等巧颈，同時(shí)也會(huì)檢測(cè)是否支持HTML5的 特性——比如audio畦木、video、本地儲(chǔ)存砸泛、和新的 標(biāo)簽的類型和屬性等十籍。在獲取到這些信息的基礎(chǔ)上，你可以在那些支持這些功能的瀏覽器上使用它們唇礁，來決定是否創(chuàng)建一個(gè)基于JS的 fallback勾栗，或者對(duì)那些不支持的瀏覽器進(jìn)行簡(jiǎn)單的優(yōu)雅降級(jí)。另外盏筐，Modernizr還可以令I(lǐng)E支持對(duì)HTML5的元素應(yīng)用CSS樣式围俘，這樣開發(fā)者就可以立即使用這些更富有語義化的標(biāo)簽了。 - postCSS
postCSS本身是一個(gè)功能比較單一的工具。它提供了一種方式用 JavaScript 代碼來處理 CSS界牡。它負(fù)責(zé)把 CSS 代碼解析成抽象語法樹結(jié)構(gòu)（Abstract Syntax Tree簿寂，AST），再交由插件來進(jìn)行處理宿亡。插件基于 CSS 代碼的 AST 所能進(jìn)行的操作是多種多樣的常遂，比如可以支持變量和混入（mixin），增加瀏覽器相關(guān)的聲明前綴挽荠，或是把使用將來的 CSS 規(guī)范的樣式規(guī)則轉(zhuǎn)譯（transpile）成當(dāng)前的 CSS 規(guī)范支持的格式克胳。從這個(gè)角度來說，PostCSS 的強(qiáng)大之處在于其不斷發(fā)展的插件體系坤按。目前 PostCSS 已經(jīng)有 200 多個(gè)功能各異的插件毯欣。開發(fā)人員也可以根據(jù)項(xiàng)目的需要，開發(fā)出自己的 PostCSS 插件臭脓。
一般在哪個(gè)網(wǎng)站查詢屬性兼容性酗钞？
caniuse.com 查CSS屬性兼容
browserhacks 查 Hack 的寫法
瀏覽器市場(chǎng)份額
