轉:瀏覽器兼容

1.什麼是 CSS hack

CSS hack因爲不一樣廠商的瀏覽器，好比Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不一樣版本，如IE6和IE7，對CSS的解析認識不徹底同樣，所以會致使生成的頁面效果不同，得不到咱們所須要的頁面效果。 這個時候咱們就須要針對不一樣的瀏覽器去寫不一樣的CSS，讓它可以同時兼容不一樣的瀏覽器，能在不一樣的瀏覽器中也能獲得咱們想要的頁面效果。
簡單的說，CSS hack的目的就是使你的CSS代碼兼容不一樣的瀏覽器。固然，咱們也能夠反過來利用CSS hack爲不一樣版本的瀏覽器定製編寫不一樣的CSS效果。
CSS Hack大體有三種表現形式 ：

• css屬性前綴法
• 選擇器前綴法
• IE條件註釋法

2.談一談瀏覽器兼容的思路

• 1.要不要作
  產品的角度（產品的受衆，受衆的瀏覽器比例，效果優先仍是基本功能優先）
  成本的角度（有無必要作某件事情）
• 2.作到什麼程度
  讓哪些瀏覽器去支持哪些效果

• 3.如何作
  1.根據兼容需求選擇技術框架/庫（Bootstrap (>=ie8),jQuery 1 (>=ie6), jQuery 2 (>=ie9),Vue (>= ie9)
  2.根據兼容需求選擇兼容工具(html5shiv.js/respond.js/css reset/normalize.css/modernizr/postCSS）
  3.條件註釋/css Hack/js　能力檢測作一些修補

• 4.關於瀏覽器兼容的應對策略(漸進加強和優雅降級)
  漸進加強 progressive enhancement：
  概念：針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
  觀點：「漸進加強」觀點認爲應關注於內容自己。
  內容是咱們創建網站的誘因。有的網站展現它，有的則收集它，有的尋求，有的操做，還有的網站甚至會包含以上的種種，但相同點是它們全都涉及到內容。這使得「漸進加強」成爲一種更爲合理的設計範例。這也是它當即被 Yahoo! 所採納並用以構建其「分級式瀏覽器支持 (Graded Browser Support)」策略的緣由所在。
  優雅降級 graceful degradation：
  概念：一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。
  觀點：「優雅降級」觀點認爲應該針對那些最高級、最完善的瀏覽器來設計網站。而將那些被認爲「過期」或有功能缺失的瀏覽器下的測試工做安排在開發週期的最後階段，並把測試對象限定爲主流瀏覽器（如 IE、Mozilla 等）的前一個版本。
  在這種設計範例下，舊版的瀏覽器被認爲僅能提供「簡陋卻無妨 (poor, but passable)」 的瀏覽體驗。你能夠作一些小的調整來適應某個特定的瀏覽器。但因爲它們並不是咱們所關注的焦點，所以除了修復較大的錯誤以外，其它的差別將被直接忽略。
  區別：優雅降級是從複雜的現狀開始，並試圖減小用戶體驗的供給，而漸進加強則是從一個很是基礎的，可以起做用的版本開始，並不斷擴充，以適應將來環境的須要。降級（功能衰減）意味着往回看；而漸進加強則意味着朝前看，同時保證其根基處於安全地帶。

3.瀏覽器兼容的寫法

• 屬性前綴法(即類內部Hack)
  例如 IE6能識別-, 下劃線, 星號，IE7能識別星號*，但不能識別-, 下劃線,IE6~IE10都認識\9，但firefox前述三個都不能認識

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

• 選擇器前綴法

  *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有效

• 條件註釋法
  這種方式是IE瀏覽器專有的Hack方式，微軟官方推薦使用的hack方式

  <!--[if IE]> 這段文字只在IE瀏覽器顯示 <![endif]--> <!--[if IE 6]> 這段文字只在IE6瀏覽器顯示 <![endif]--> <!--[if gte IE 6]> 這段文字只在IE6以上(包括)版本IE瀏覽器顯示 <![endif]--> <!--[if ! IE 8]> 這段文字在非IE8瀏覽器顯示 <![endif]--> <!--[if !IE]> 這段文字只在非IE瀏覽器顯示 <![endif]-->

  4.如下工具/名詞是作什麼的

• 條件註釋
  條件註釋 是於HTML源碼中被 IE 有條件解釋的語句。條件註釋可被用來向 IE提供及隱藏代碼。 條件註釋最初於微軟的 Internet Explorer 5瀏覽器中出現，而且直至 Internet Explorer 9 均支持。微軟已宣佈於IE10中止支持。具體代碼如上已給出。

• IE Hack
  針對IE瀏覽器編寫不一樣的CSS的讓IE可以正常渲染的過程

• js 能力檢測
  能力檢測又稱特性檢測。能力檢測的目的不是識別具體的瀏覽器，而是識別瀏覽器的能力。
  能力檢測的目的應該是根據你須要的特性來選擇問題的解決方案，而不是檢測用戶在用什麼瀏覽器。並且在檢測時要保證你要用到的能力確實存在，本身不要作過多的推測，代碼也不要作過多的判斷。
  兩個重要的概念：
  第一個概念是先檢測達成目的的最經常使用的特性。先檢測最經常使用的特性，能夠保證代碼最優化，由於在多數狀況下均可以免測試多個條件。
  第二個概念是必須測試實際要用到的特性。一個特性存在，不必定意味着另外一個特性也存在。

• html5shiv.js
  IE 9以前的版本幾乎不支持HTML5元素和其它HTML5特性。
  HTML5 Shiv支持在舊版Internet Explorer（IE9以前）中使用HTML5細分元素，併爲Internet Explorer 6-9，Safari 4.x（和iPhone 3.x）和Firefox 3.x提供基本的HTML5樣式。

• respond.js
  響應式佈局，理想狀態是，對PC/移動各類終端進行響應。媒體查詢的支持程度是IE9+以及其餘現代的瀏覽器，可是IE8在市場當中仍然佔據了比較大量的市場份額，使咱們不得不進行IE低端瀏覽器的考慮。那麼如何在IE6~8瀏覽器中兼容響應式佈局呢？這裏咱們須要藉助這樣一個文件：respond.js
  Respond.js 是一個快速、輕量的 polyfill，用於爲 IE6-8 以及其它不支持 CSS3 Media Queries 的瀏覽器提供媒體查詢的 min-width 和 max-width 特性，實現響應式網頁設計。
• css reset
  css reset是經過從新定義標籤樣式，把瀏覽器的默認樣式覆蓋掉，以便保持個瀏覽器渲染的一致性。相對暴力

• normalize.css
  normalize.css是reset.css的替代方案，保留有用的瀏覽器默認樣式，同時進行一些bug的修復。相對平和

• Modernizr
  Modernizr是一套JavaScript 庫，用來偵測瀏覽器是否支持 CSS3 或 HTML5 功能支持狀況等。若是瀏覽器不支持，Modernizr會使用其餘的解決方法來進行模擬。
  Modernizr 會在頁面加載後當即檢測特性；而後建立一個包含檢測結果的 JavaScript 對象，同時在 html 元素加入方便你調整 CSS 的 class 名。

• postCSS
  PostCSS是一個使用JS插件轉換樣式的工具。這些插件能夠刪除您的CSS，支持變量和混合，透明將來的CSS語法，內聯圖像等。
  PostCSS不是預處理器自己; 它不會轉換CSS。事實上，它自己根本不作任何事。它所作的是提供一個CSS解析器和一個框架，用於建立能夠分析，lint，處理資產，優化，建立回退，不然轉換解析的CSS的插件。PostCSS將CSS解析爲抽象語法樹（AST），經過一系列插件將其傳遞，而後PostCSS核心爲插件更改的樹生成一個新的CSS字符串。。若是你熟悉JavaScript工具，那麼你能夠認爲PostCSS 爲CSS的Babel。
  PostCSS目前有200多個插件，其中不少在PostCSS GitHub頁面上列出，而其餘的能夠在有用的PostCSS目錄postcss.parts中找到。PostCSS能夠集成在大多數構建工具中，包括Gulp，Grunt，webpack或npm。
  PostCSS被行業領導者使用，包括維基百科，Twitter，阿里巴巴和JetBrains。該 Autoprefixer PostCSS插件是最流行的CSS處理器之一。

5.通常在哪一個網站查詢屬性兼容性？

http://browserhacks.com/
http://caniuse.com/