瀏覽器兼容性探討

關于瀏覽器兼容的大致思路

1. 首先要考慮的就是有沒有必要做

   • 產(chǎn)品的角度（產(chǎn)品的受眾、受眾的瀏覽器比例、效果優(yōu)先還是基本功能優(yōu)先）
   • 成本的角度 (有無必要做某件事)

2. 如果要做兼容，那么做到什么程度

   • 讓哪些瀏覽器支持哪些效果

3. 如何做

   • 根據(jù)兼容需求選擇技術框架/庫(jquery)
   • 根據(jù)兼容需求選擇兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
     postCSS

• 條件注釋、CSS Hack、js 能力檢測做一些修補

什么是CSS hack

CSS hack，是一種用屬性前綴、選擇器前綴、以及IE條件注釋法等hack技術，由于不同廠商，不同瀏覽器，不同版本中，對CSS的支持程度不同，表現(xiàn)方式也有差異。
因此為了，盡可能的縮小差異，達到不同瀏覽器中，都有較為一致的體驗，因此需要用到CSS hack技術。
在 www.caniuse.com 網(wǎng)站中，可以查看各種HTML CSS 的瀏覽器兼容支持情況。

ie6、7的 hack 寫法是？

1. 首先所有的IE 10以下的瀏覽器browser（不含10）都支持HTML條件注釋法，

2. IE6能識別下劃線" _ "和星號" * "，IE7能識別星號" * "，但不能識別下劃線" _ "，IE6~IE10都認識"\9"。
   因此：
   比如關于color 的hack寫法：
   .box{
   color: red;
   _color: blue; /* IE6中，color是正常識別的，但是_color也能識別，因為產(chǎn)生后者覆蓋前者，IE6中顏色便是blue了。 /
   color: pink; /IE6、7都能識別， 所以如果繼續(xù)添加這一行，那么IE 6中，會在此被pink覆蓋，如果是在IE 7中，由于不能識別之前的_color, 所以第一次渲染成了color: red; 第二次被color: pink; 覆蓋。 /
   color: yellow\9; /ie/edge 6-8*/
   }

3. 另外就是使用條件注釋法，在HTML寫入：

  <!--[if IE 6]>
  <p>You are using Internet Explorer 6.</p>
  <![endif]-->

這代表如果是IE 6 瀏覽器，那么則有如上的p段落。

  <!–-[if IE 7]>
  <link rel="stylesheet" href="ie7.css" type="text/css" />
  <![endif]–->

這代表，如果是IE 7 瀏覽器，那么引入如上的css樣式表。

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

1. 條件注釋

<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->

2. 屬性前綴

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

3. 選擇器前綴

span{ /僅ie6/
display: block;
}

4. 使用Modernizr工具

<div class="no-textshadow"></div>
.no-textshadow{border:1px solid red;}

5. 條件注釋和兼容工具相結合

 <!--[if lt IE 9]>
    <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>
  <![endif]-->

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

• 條件注釋
  條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼。IE10已經(jīng)不再支持條件注釋

• IE Hack
  是針對IE 兼容的特殊寫法，比如 IE6能識別下劃線""和星號" "，IE7能識別星號" "，但不能識別下劃線""，IE6~IE10都認識"\9"，但firefox前述三個都不能認識

• js 能力檢測
  各個版本的瀏覽器有許多不一致性，和各種怪癖，因此需要用js對瀏覽器是否支持某種特定的能力，做檢測。確定之后，就可以給出相關的方案。

• html5shiv.js
  針對不支持HTML5標簽的瀏覽器，創(chuàng)建并模擬HTML5的標簽的效果并使相應的CSS生效。（html5shiv is an HTML5 JavaScript shim for IE to recognise and style the HTML5 elements）

• respond.js
  為不支持CSS3媒體查詢的瀏覽器(IE6-8)（以及其他可能不支持的瀏覽器）模擬CSS3的媒體查詢。

• css reset
  早起瀏覽器支持和理解的css規(guī)范不同，導致渲染頁面時效果不一致， 會出現(xiàn)很多兼容性問題。因此需要在樣式表一開始的地方，進行一些樣式重置，最開始是最暴力的方式， * {margin:0; padding:0;}.后來發(fā)現(xiàn)，過于畫蛇添足，回頭又要用到很多默認樣式，再回頭賤賤地添加回來，因此css reset經(jīng)過了不同階段的發(fā)展，各方提出了自己的css reset方案。

• normalize.css
  直到 normalize.css出現(xiàn)，顛覆css reset 的理念。reset的目的，是將所有瀏覽器自帶樣式重置掉，這樣易于保持各方瀏覽器渲染的異質性。
  而normalize的理念則是盡量保持瀏覽器的默認樣式，不進行太多的重置。比css reset更高明的地方在于，normalize 項目研究了各種瀏覽器默認元素風格之間的差異，精確定位需要重置的樣式。

• Modernizr
  是一個JS類庫，用來檢測瀏覽器的CSS3和HTML5能力，從而解決瀏覽器的兼容問題。

• postCSS
  一個用js插件對樣式進行轉換的工具

常見屬性的兼容情況

參考

caniuse.com 查CSS屬性兼容
browserhacks 查 Hack 的寫法