關於瀏覽器相容的一些問題

weixin_33912246發表於2017-06-21
瀏覽器

什麼是CSS hack

CSS hack由於不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對CSS的解析認識不完全一樣，因此會導致生成的頁面效果不一樣，得不到我們所需要的頁面效果。 這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能夠同時相容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果。
簡單的說，CSS hack的目的就是使你的CSS程式碼相容不同的瀏覽器。當然，我們也可以反過來利用CSS hack為不同版本的瀏覽器定製編寫不同的CSS效果。

CSS hack的幾種方法
  • CSS hack大概有3種表現形式，CSS屬性字首法、選擇器字首法以及IE條件註釋法（即HTML頭部引用if IE）hack,實際專案中CSS hack大部分是針對IE瀏覽器不同版本之間的表現差異湧入的。
  1. 屬性字首法（即類內部Hack）：例如IE6能識別下劃線" _ "和星號" * ",IE7能識別星號" * "，但是不能識別下劃線，IE6~IE10都認識"\9"，但firefox前述三個都不能認識
  2. 選擇器字首法（即選擇器Hack）
  3. IE條件註釋法(即HTML條件註釋Hack)：針對所有IE(注：IE10+已經不再支援條件註釋)： ，針對IE6及以下版本：。這類Hack不僅對CSS生效，對寫在判斷語句裡面的所有程式碼都會生效

解決瀏覽器相容的思路

解決瀏覽器相容問題我們一般按照以下思路進行

  • 首先，我們要考慮要不要做相容，主要從以下兩個角度去考慮
    • 產品的角度（產品的受眾，受眾使用各種瀏覽器的比重，受眾重視的是效果優先還是功能優先）
    • 成本角度（有沒有必要去做這樣的相容）
  • 如果要做，需要做到什麼程度
    • 讓那些瀏覽器支援哪些效果
      比如IE6/7主要滿足基本使用功能，不需要做什麼特效，IE8以上不僅功能要滿足，各種效果也要支援。
  • 接下來，就是如何做的問題了
    • 根據相容需求選擇技術框架，比如Bootstrap (>=ie8)
      jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
      Vue (>= ie9)
    • 根據相容需求選擇相容工具html5shiv.js、respond.js、css reset、Modernizr
    • postCSS
    • 使用條件註釋、CSS Hack、js 能力檢測做一些修補

以上，就是我們解決瀏覽器相容問題的大概思路

*註釋：
漸進增強(progressive enhancement): 針對低版本瀏覽器進行構建頁面，保證最基本的功能，然後再針對高階瀏覽器進行效果、互動等改進和追加功能達到更好的使用者體驗
優雅降級 (graceful degradation): 一開始就構建完整的功能，然後再針對低版本瀏覽器進行相容。

常用的瀏覽器相容寫法

  • 條件註釋
    條件註釋是向html程式碼中新增有條件解釋的語句，條件註釋可被用來向IE提供及隱藏程式碼。

     <!--[if IE 7]><link rel="stylesheet" href="ie7.css" type="text/css" /><![end if] -- >
專案 範例 說明
！ [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
I [if (IE 6)I(IE 7)] IE6或者IE7

*注意
使用了條件註釋的頁面在 IE 9 中可正常工作，但在 IE10 中無法正常工作。IE10 不再支援條件註釋

  • 屬性選擇器法
    .box {
    color: red;
    _color: red; /ie6/
    color: red; /ie67    /
    clolor: blue\9; /ie/edge 6-10/
    }

  • 選擇器字首法
    *html{

      }  /*只對IE6生效8*/

  *+html {

  }    /* 只對IE7生效 */

  • 條件註釋結合類選擇器整體優化

      <!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]-->

    接著建立對應的樣式
    .iem7 .demo {color: yellow;}/IE7移動端/
    .ie6 .demo{color: green;}/IE6瀏覽器/
    .ie7 .demo {color: orange;}/IE7瀏覽器/
    .ie8 .demo {color: lime;}/IE8瀏覽器/

  • 利用Modernizr工具
    執行的時候它會在html元素上新增一批CSS的class名稱，這些class名稱標記當前瀏覽器支援哪些特性和不支援哪些特性，支援的特性就直接顯示該天特性的名稱作為一個class（例:canvas,websockets），不支援的特性顯示的class是“no-特性名稱”。以下是IE9下生成的特徵型別

      <html class=" js no-flexbox canvas canvastext no-webgl no-touch geolocation 
        postmessage no-websqldatabase no-indexeddb hashchange no-history 
  draganddrop no-websockets rgba hsla multiplebgs backgroundsize 
  no-borderimage borderradius boxshadow no-textshadow opacity 
  no-cssanimations no-csscolumns no-cssgradients no-cssreflections
  csstransforms no-csstransforms3d no-csstransitions fontface 
  generatedcontent video audio localstorage sessionstorage 
  no-webworkers no-applicationcache svg inlinesvg smil svgclippaths">

可以直接使用Modernizr在元素裡生成的class名稱，在你的css檔案裡定義相應的屬性以便支援當前瀏覽器。例如，下面的程式碼可以屬性，在支援shadow陰影的瀏覽器顯示shadow，不支援的瀏覽器顯示標準的邊框：

    .boxshadow #MyContainer { 
        border: none;
       -webkit-box-shadow: #666 1px 1px 1px;
       -moz-box-shadow: #666 1px 1px 1px;
    } 
    .no-boxshadow #MyContainer {
       border: 2px solid black;
    }

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

  1. 條件註釋
    條件註釋 是於HTML原始碼中被 IE 有條件解釋的語句。條件註釋可被用來向 IE提供及隱藏程式碼。 條件註釋最初於微軟的 Internet Explorer 5瀏覽器中出現，並且直至 Internet Explorer 9 均支援。微軟已宣佈於IE10停止支援。

  2. IE Hack
    針對IE瀏覽器編寫不同的CSS的讓IE能夠正常渲染的過程

  3. js 能力檢測
    瀏覽器的能力檢測目標不是檢測特定的瀏覽器，而是檢測瀏覽器的能力。這樣，只需要檢測瀏覽器是否支援特定的能力，就可以給出特定的解決方案。這一部分檢測是解決瀏覽器相容問題的主要依據。

基本模式：

    if( object.propertyInQuestion){
      //使用 object.propertyInQuestion
    }

兩個重要的概念：
第一個概念是先檢測達成目的的最常用的特性。先檢測最常用的特性，可以保證程式碼最優化，因為在多數情況下都可以避免測試多個條件。
第二個概念是必須測試實際要用到的特性。一個特性存在，不一定意味著另一個特性也存在。

  1. html5shiv.js
    用於解決IE9以下版本瀏覽器對HTML5新增標籤不識別，並導致CSS不起作用的問題。所以我們在使用過程中，想要讓低版本的瀏覽器，即IE9以下的瀏覽器支援，那麼這款html5shiv.js是一個非常好的選擇！

  2. respond.js
    Respond.js 是一個小指令碼，用於為 IE6-8 以及其它不支援 CSS3 媒體查詢功能的瀏覽器提供媒體查詢的 min-width 和 max-width 特性，實現響應式網頁設計。

  3. css reset
    將瀏覽器的預設樣式全部去掉，更準確說就是通過重新定義標籤樣式。“覆蓋”瀏覽器的CSS預設屬性。最最簡單的說法就是把瀏覽器提供的預設樣式覆蓋掉！這就是CSS reset。

  4. normalize.css
    Normalize.css 是一個可以定製的CSS檔案，它讓不同的瀏覽器在渲染網頁元素的時候形式更統一。
    它可以：

    • 保留有用的預設值，不同於許多 CSS reset 的簡單粗暴。
    • 標準化的樣式，適用範圍廣的元素。
    • 糾正錯誤和常見的瀏覽器的不一致性。
    • 一些細微的改進，提高了易用性。
    • 使用詳細的註釋來解釋程式碼。

  5. Modernizr
    Modernizr 使你可以方便地為各種情況編寫 JavaScript 和 CSS，無論瀏覽器是否支援這些特性。這是處理漸進增強的完美方案。
    Modernizr 會在頁面載入後立即檢測特性；然後建立一個包含檢測結果的 JavaScript 物件，同時在 html 元素加入方便你調整 CSS 的 class 名。

  6. postCSS
    它可以被理解為一個平臺，可以讓一些外掛在上面跑，它提供了一個解析器，可以將CSS解析成抽象語法樹，通過PostCSS這個平臺，我們能夠開發一些外掛，來處理CSS。熱門外掛如autoprefixer，它可以幫我們處理相容問題，只需正常寫CSS，autoprefixer可以幫我的自動生成相容性程式碼

一般在哪個網站查詢屬性相容性

http://caniuse.com

相關文章