什么是 CSS hack

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

談一談瀏覽器兼容的思路

• 要不要做
  • 產(chǎn)品的角度（產(chǎn)品的受眾、受眾的瀏覽器比例、效果優(yōu)先還是基本功能優(yōu)先）
  • 成本的角度 (有無必要做某件事)
• 做到什么程度
  • 讓哪些瀏覽器支持哪些效果
• 如何做
  • 根據(jù)兼容需求選擇技術(shù)框架/庫(jquery)
  • 根據(jù)兼容需求選擇兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
  • postCSS
  • 條件注釋、CSS Hack、js 能力檢測做一些修補(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能識別下劃線""和星號" * "，IE7能識別星號" * "，但不能識別下劃線""，IE6~IE10都認(rèn)識"\9"，但firefox前述三個都不能認(rèn)識。

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

• 選擇器前綴法(即選擇器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有效

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

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

• respond.js是一個快速、輕量的 polyfill，用于為 IE6-8 以及其它不支持 CSS3 Media Queries 的瀏覽器提供多媒體查詢的 min-width 和 max-width 特性，實現(xiàn)響應(yīng)式網(wǎng)頁設(shè)計（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下面看到頁面閃屏的概率就越低，因為最初css會先渲染出來，如果respond.js加載得很后面，這時重新根據(jù)media query解析出來的css會再改變一次頁面的布局等，所以看起來有閃屏的現(xiàn)象）

• css reset 將瀏覽器的默認(rèn)樣式全部去掉;通過重新定義標(biāo)簽樣式,“覆蓋”瀏覽器的CSS默認(rèn)屬性。
• normalize.css 是一個很小的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 是一個用來檢測瀏覽器功能支持情況的 JavaScript 庫。 目前，通過檢驗瀏覽器對一系列測試的處理情況，Modernizr 可以檢測18項 CSS3 功能以及40多項關(guān)于HTML5 的功能。 它比傳統(tǒng)檢測瀏覽器名稱（瀏覽器嗅探）的方式更為可靠。 一整套測試的執(zhí)行時間僅需幾微秒。 此外，Modernizr 網(wǎng)站通過定制腳本只對你感興趣的元素進(jìn)行檢測，從而實現(xiàn)效率優(yōu)化。
• postCSS 本身是一個功能比較單一的工具。它提供了一種方式用 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ī)范支持的格式。從這個角度來說，PostCSS 的強(qiáng)大之處在于其不斷發(fā)展的插件體系。目前 PostCSS 已經(jīng)有 200 多個功能各異的插件。開發(fā)人員也可以根據(jù)項目的需要，開發(fā)出自己的 PostCSS 插件。

一般在哪個網(wǎng)站查詢屬性兼容性？

• caniuse.com