什么是 CSS hack
由于不同廠商的瀏覽器撬讽，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等昂利，或者是同一廠商的瀏覽器的不同版本达吞，如IE6和IE7培他，對CSS的解析認識不完全一樣，因此會導致生成的頁面效果不一樣草添，得不到我們所需要的頁面效果驶兜。CSS hack 就是這種情況下我們針對不同的瀏覽器去寫不同的CSS的一個過程，讓它能夠同時兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果抄淑。
CSS hack的方法有：
- CSS屬性前綴法
- 選擇器前綴法
- IE條件注釋法
談一談瀏覽器兼容的思路
- 產(chǎn)品角度考慮：考慮產(chǎn)品的受眾犀盟、受眾使用的瀏覽器比例、頁面效果優(yōu)先還是基本功能優(yōu)先蝇狼。
- 成本角度：是否有必要為了追求網(wǎng)頁效果而花費資源；還是保持頁面基本功能倡怎、節(jié)約成本迅耘。
- 項目、產(chǎn)品需求角度：需要兼容哪些瀏覽器监署；或是兼容到哪些瀏覽器的哪部分版本颤专；需要讓瀏覽器實現(xiàn)哪些功能。
- 從產(chǎn)品的市場定位或功能定位角度出發(fā)：是選擇漸進增強：先保證基本功能钠乏，再根據(jù)需求及資源完善頁面效果栖秕；還是選擇優(yōu)雅降級：先構(gòu)建網(wǎng)頁的整體功能效果，再往下滿足低版本瀏覽器的兼容性晓避。
- 根據(jù)兼容性需求選擇合適的框架：
合適的框架：
Bootstrap：>=IE8
jQuery1.~ ：>=IE6,jQuery 2.~ >=IE9
vue >=ie9 - 根據(jù)需求選擇合理的兼容性開發(fā)工具：html5shiv.js簇捍、respond.js、css reset俏拱、normalize.css暑塑、Modernizr、postCSS
列舉5種以上瀏覽器兼容的寫法
- IE條件注釋法
锅必！ [if !IE] 非IE
lt [if lt IE 5.5] 小于IE 5.5
lte [if lte IE 6] 小于等于IE6
gt [if gt IE 5] 大于 IE5
gte [if gte IE 7] 大于等于IE7
| [if (IE 6)|(IE 7)] IE6或者IE7
- 選擇器前置法
_body{}
*body{} /*IE6能識別下劃線和*號其他瀏覽器都不能事格，IE7能識別下劃線。
body/9{} /*IE6-IE10都能識別/9搞隐，而firefox對這幾個標號都不能識別驹愚。
- CSS屬性前綴法
.box{
color: red;
_color: blue; /*ie6能識別*/
*color: pink; /*ie67都能識別*/
color: yellow\9; /*ie/edge 6-8都能識別*/
}
.clearfix{
content:'';
display:block;
clear:both;
}
.clearbox{
*zoom:1; /*僅對IE6 7 有效，出發(fā)了haslayout*/
- Modernizr工具
運行的時候它會在html元素上添加一批CSS的class名稱劣纲，這些class名稱標記當前瀏覽器支持哪些特性和不支持哪些特性逢捺，支持的特性就直接顯示該天特性的名稱作為一個class（例:canvas,websockets），不支持的特性顯示的class是“no-特性名稱”味廊。 - 條件注釋與類選擇器結(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]-->
以下工具/名詞是做什么的
- 條件注釋
條件注釋用于HTML源碼中被IE有條件解釋的語句蒸甜。條件注釋可被用來向IE提供及隱藏代碼。使用了條件注釋的頁面在IE9中可正常工作余佛，但在IE10中無法正常工作柠新。 IE10不再支持條件注釋。 - IE Hack
IE Hack針對IE瀏覽器的不同版本去寫不同的CSS辉巡，讓它能在這些瀏覽器中得到我們想要的頁面效果恨憎。常用方法：CSS屬性前綴法、選擇器前綴法以及IE條件注釋法。 - js 能力檢測
js 能力檢測使用js檢測瀏覽器支持的屬性憔恳，以便展示效果瓤荔。目標不是識別特定的瀏覽器，而是識別瀏覽器的能力钥组。 - html5shiv.js
html5shiv.js通過使用html5shiv.js讓IE9以下版本瀏覽器支持所有的HTML5標簽输硝。 - respond.js
respond.jsrespond.js讓不支持css3 Media Query的瀏覽器包括IE6-IE8支持查詢。 - css reset
css resetcss reset(css重置程梦、清除css樣式)重置樣式点把，清除瀏覽器默認樣式。 - normalize.css
normalize.cssnormalize.css 是一個可以定制的CSS文件屿附，它讓不同的瀏覽器在渲染網(wǎng)頁元素的時候形式更統(tǒng)一郎逃。 - Modernizr
ModernizrModernizr是一個開源的JS庫，它使得那些基于訪客瀏覽器的不同（指對新標準支持性的差異）而開發(fā)不同級別體驗的設(shè)計師的工作變得更為簡單挺份。它使得設(shè)計師可以在支持HTML5和CSS3的瀏覽器中充分利用HTML5和CSS3的特性進行開發(fā)褒翰，同時又不會犧牲其他不支持這些新技術(shù)的瀏覽器的控制。 - postCSS
PostCSS可以直觀的理解為：它就是一個平臺匀泊；PostCSS提供了一個解析器优训，它能夠?qū)SS解析成抽象語法樹（AST）；通過在PostCSS這個平臺上各聘，能夠開發(fā)一些插件型宙，來處理CSS，比如熱門的：autoprefixer伦吠；能夠使用JavaScript來開發(fā)插件妆兑。
