什么是 CSS hack

• CSS hack由于不同廠商的瀏覽器喂走，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等悄蕾，或者是同一廠商的瀏覽器的不同版本蒋伦，如IE6和IE7船万，對(duì)CSS的解析認(rèn)識(shí)不完全一樣酸役，因此會(huì)導(dǎo)致生成的頁面效果不一樣栗竖，得不到我們所需要的頁面效果。 這個(gè)時(shí)候我們就需要針對(duì)不同的瀏覽器去寫不同的CSS维咸，讓它能夠同時(shí)兼容不同的瀏覽器也切，能在不同的瀏覽器中也能得到我們想要的頁面效果。
  比如.kwstu{width:300px;_width:200px;}腰湾，一般瀏覽器會(huì)先給元素使用width:300px;的樣式雷恃，緊接著后面還有個(gè)_width:200px;由于下劃線_width只有IE6可以識(shí)別，所以此樣式在IE6中實(shí)際設(shè)置對(duì)象的寬度為200px费坊，后面的把前面的給覆蓋了倒槐，而其他瀏覽器不識(shí)別_width不會(huì)執(zhí)行_width:200px;這句樣式，所以在其他瀏覽器中設(shè)置對(duì)象的寬度就是300px;

談一談瀏覽器兼容的思路

• 要不要做
  • 產(chǎn)品的角度（產(chǎn)品的受眾附井、受眾的瀏覽器比例讨越、效果優(yōu)先還是基本功能優(yōu)先）
  • 成本的角度 (有無必要做某件事)
• 做到什么程度
  • 讓哪些瀏覽器支持哪些效果
• 如何做
  • 根據(jù)兼容需求選擇技術(shù)框架/庫(kù)(jquery)
  • 根據(jù)兼容需求選擇兼容工具(html5shiv.js两残、respond.js、css reset把跨、normalize.css人弓、Modernizr)
  • postCSS
  • 條件注釋、CSS Hack着逐、js 能力檢測(cè)做一些修補(bǔ)

列舉5種以上瀏覽器兼容的寫法

• 條件注釋法.是于HTML源碼中被IE有條件解釋的語句崔赌。條件注釋可被用來向IE提供及隱藏代碼。使用了條件注釋的頁面在 Windows Internet Explorer 9 中可正常工作耸别，但在 Internet Explorer 10 中無法正常工作健芭。

<!--[if IE]>此內(nèi)容只有IE可見<![endif]-->
<!--[if IE 6.0]>此內(nèi)容只有IE6.0可見<![endif]-->

 <!--[if IE 6]>
 <p>You are using Internet Explorer 6.</p>
 <![endif]-->
 <!--[if !IE]><!-->
 <script>alert(1);</script>
 <!--<![endif]-->
 <!--[if IE 8]>
 <link href="ie8only.css" rel="stylesheet">
 <![endif]-->

• 屬性前綴法(即類內(nèi)部Hack)：例如 IE6能識(shí)別下劃線""和星號(hào)" * "秀姐，IE7能識(shí)別星號(hào)" * "慈迈，但不能識(shí)別下劃線""，IE6~IE10都認(rèn)識(shí)"\9"省有，但firefox前述三個(gè)都不能認(rèn)識(shí)痒留。

.box{
  color: red;
  _color: blue; /*ie6*/
  *color: pink; /*ie67*/
  color: yellow\9;  /*ie/edge 6-8*/
}

• 選擇器前綴法(即選擇器Hack)

  *html* 前綴只對(duì)IE6生效
  *+html *+前綴只對(duì)IE7生效
  @media screen\9{...}只對(duì)IE6/7生效
  @media \0screen {body { background: red; }}只對(duì)IE8有效
  @media \0screen\,screen\9{body { background: blue; }}只對(duì)IE6/7/8有效
  @media screen\0 {body { background: green; }} 只對(duì)IE8/9/10有效
  @media screen and (min-width:0\0) {body { background: gray; }} 只對(duì)IE9/10有效
  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對(duì)IE10有效

• 根據(jù)兼容需求選擇合適的技術(shù)框架
  • Bootstrap (>=ie8)
  • jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
  • Vue (>= ie9)
• 根據(jù)兼容需求選擇兼容工具
  • html5shiv.js ： 在IE6~8（不支持html5標(biāo)簽）上模擬html5標(biāo)簽
  • respond.js ： 在IE6~8（不支持css3）上模擬CSS3 Media Queries
  • CSS Reset和Normalize.css
  • Modernizr.js：他會(huì)為瀏覽器的html標(biāo)簽生成一批的css的class名稱，標(biāo)記當(dāng)前瀏覽器支持和不支持的特性蠢沿。我們利用html標(biāo)簽上的類名伸头，就可以為不同版本的不同瀏覽器添加兼容樣式

以下工具/名詞是做什么的

• 條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼搏予。

    <!--[if IE 6]>
    <p>You are using Internet Explorer 6.</p>
    <![endif]-->
    <!--[if !IE]><!-->
    <script>alert(1);</script>
    <!--<![endif]-->
    <!--[if IE 8]>
    <link href="ie8only.css" rel="stylesheet">
    <![endif]-->

使用了條件注釋的頁面在 Windows Internet Explorer 9 中可正常工作熊锭，但在 Internet Explorer 10 中無法正常工作。

• IE Hack 針對(duì)不同版本的IE瀏覽器雪侥，使用特殊的符號(hào)或者方式碗殷，讓它能同時(shí)在不同版本的IE瀏覽器中都能得到我們想要的頁面效果。
• js 能力檢測(cè) 最常用的也是最廣泛使用的客戶端檢測(cè)技術(shù)是能力檢測(cè)（特性檢測(cè)）速缨。能力檢測(cè)的目標(biāo)不是識(shí)別特定的瀏覽器锌妻，而是識(shí)別瀏覽器的能力。使用這種方式無需顧及瀏覽器如何如何旬牲，只需確定瀏覽器是否支持特定的能力仿粹，就可以給出相關(guān)的方案。參考
• html5shiv.js主要解決HTML5提出的新的元素不被IE6-8識(shí)別原茅，這些新元素不能作為父節(jié)點(diǎn)包裹子元素吭历，并且不能應(yīng)用CSS樣式。讓CSS 樣式應(yīng)用在未知元素上只需執(zhí)document.createElement(elementName)即可實(shí)現(xiàn)擂橘。html5shiv就是根據(jù)這個(gè)原理創(chuàng)建的晌区。參考
  html5shiv的使用非常的簡(jiǎn)單，考慮到IE9是支持html5的，所以只需要在頁面head中添加如下代碼即可：

<!--[if lt IE 9]>
    <script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->

• respond.js是一個(gè)快速朗若、輕量的 polyfill恼五，用于為 IE6-8 以及其它不支持 CSS3 Media Queries 的瀏覽器提供多媒體查詢的 min-width 和 max-width 特性，實(shí)現(xiàn)響應(yīng)式網(wǎng)頁設(shè)計(jì)（Responsive Web Design）哭懈。 參考
  1.在css中正常用 min/max-width media queries

@media screen and (min-width: 480px){
        ...styles for 480px and up go here
    }

2.引入respond.min.js灾馒，但要在css的后面（越早引入越好，在ie下面看到頁面閃屏的概率就越低遣总，因?yàn)樽畛鮟ss會(huì)先渲染出來睬罗，如果respond.js加載得很后面，這時(shí)重新根據(jù)media query解析出來的css會(huì)再改變一次頁面的布局等彤避，所以看起來有閃屏的現(xiàn)象）

• css reset 將瀏覽器的默認(rèn)樣式全部去掉;通過重新定義標(biāo)簽樣式,“覆蓋”瀏覽器的CSS默認(rèn)屬性傅物。
• normalize.css 是一個(gè)很小的CSS文件夯辖，但它在默認(rèn)的HTML元素樣式上提供了跨瀏覽器的高度一致性琉预。相比于傳統(tǒng)的CSS reset,Normalize.css是一種現(xiàn)代的、為HTML5準(zhǔn)備的優(yōu)質(zhì)替代方案蒿褂。
  關(guān)于css reset與normalize.css的區(qū)別參考
• Modernizr 是一個(gè)用來檢測(cè)瀏覽器功能支持情況的 JavaScript 庫(kù)圆米。 目前，通過檢驗(yàn)瀏覽器對(duì)一系列測(cè)試的處理情況啄栓，Modernizr 可以檢測(cè)18項(xiàng) CSS3 功能以及40多項(xiàng)關(guān)于HTML5 的功能娄帖。 它比傳統(tǒng)檢測(cè)瀏覽器名稱（瀏覽器嗅探）的方式更為可靠。 一整套測(cè)試的執(zhí)行時(shí)間僅需幾微秒昙楚。 此外近速，Modernizr 網(wǎng)站通過定制腳本只對(duì)你感興趣的元素進(jìn)行檢測(cè)，從而實(shí)現(xiàn)效率優(yōu)化堪旧。
• 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