標籤：

關於瀏覽器兼容問題的一些名詞和工具

03-07

條件注釋

條件注釋是一種安全的區分IE瀏覽器版本的語法，且被認為是取代針對IE css hack的首選辦法。

  1. 條件注釋的基本結構和HTML的注釋(<!– –>)是一樣的。因此IE以外的瀏覽器將會把它們看作是普通的注釋而完全忽略它們。
  2. 條件注釋只能用於IE5以上。
  3. 如果你安裝了多個IE，條件注釋將會以最高版本的IE為標準。
  4. IE將會根據if條件來判斷是否如解析普通的頁面內容一樣解析條件注釋里的內容。

<!--[if IE]>用於 IE <![endif]--><!--[if IE 6]>用於 IE6 <![endif]--><!--[if IE 7]>用於 IE7 <![endif]--><!--[if IE 8]>用於 IE8 <![endif]--><!--[if IE 9]>用於 IE9 <![endif]--><!--[if gt IE 6]> 用於 IE6 以上版本<![endif]--><!--[if lte IE 7]> 用於 IE7或更低版本 <![endif]--><!--[if gte IE 8]>用於 IE8 或更高版本 <![endif]--><!--[if lt IE 9]>用於 IE9 以下版本<![endif]--><!--[if !IE]> -->用於非 IE <!-- <![endif]-->

IE hack

hack就是黑客，這裡比喻解決IE問題的一些非官方的非規範的（而又有效流通的）技術手段。

JS 能力檢測

能力檢測的目標不是識別特定的瀏覽器，而是識別瀏覽器的能力。使用這種方式無需顧及瀏覽器如何如何，只需確定瀏覽器是否支持特定的能力，就可以給出相關的方案。

html5shiv.js

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

aFarkas/html5shivgithub.com圖標

respond.js

響應式布局理想狀態是對PC/移動各種終端進行響應。媒體查詢的支持程度是IE9+以及其他現代的瀏覽器，但是IE8在市場當中仍然佔據了比較大量的市場份額，使我們不得不進行IE低端瀏覽器的考慮。如何在IE6~8瀏覽器中兼容響應式布局呢？這裡我們需要藉助這樣一個文件：respond.js。

Bootstrap裡面就引入了這個js文件。

https://github.com/scottjehl/Respondgithub.com圖標

CSS Reset

只要存在使用不同瀏覽器的可能，那你就不得不從完美的理想狀態回到現實。因為不同核心的瀏覽器對CSS的解析效果呈現各異，導致所期望的效果跟瀏覽器的「理解」效果有偏差。

CSS reset就是用來重置（複位）元素在不同核心瀏覽器下的默認值，盡量保證元素在不同瀏覽器下的同一「起跑線」。

對於不同的項目的CSS Reset也會有變化。CSS Reset應當是個人積累的經驗的總結，重置一些經常使用的，在不斷學習中修改。

淘寶網的CSS reset：

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {margin:0;padding:0;}body,button,input,select,textarea{font:12px/1.5 tahoma,arial,5b8b4f53;}h1,h2,h3,h4,h5,h6{font-size:100%;}address,cite,dfn,em,var{font-style:normal;}code,kbd,pre,samp{font-family:courier new,courier,monospace;}small{font-size:12px;}ul,ol{list-style:none;}a{text-decoration:none;}a:hover{text-decoration:underline;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}legend{color:#000;}fieldset,img{border:0;}button,input,select,textarea{font-size:100%;}table{border-collapse:collapse;border-spacing:0;}

Normalize.css

CSS reset 是革命黨，normalize.css 是改良派。

使用normalize.css，網站需要較少的瀏覽器兼容性修補程序。

Normalize.css 與傳統的 CSS Reset 有哪些區別？www.zhihu.com圖標Make browsers render all elements more consistently.necolas.github.io

Modernizr

使用炫酷新穎的 web 技術是一件很有趣的事情，但你不得不面對落後的瀏覽器。Modernizr 使你可以方便地為各種情況編寫 JavaScript 和 CSS，無論瀏覽器是否支持這些特性。這是處理漸進增強的完美方案。

工作原理：

Modernizr 會在頁面載入後立即檢測特性；然後創建一個包含檢測結果的 JavaScript 對象，同時在 html 元素加入方便你調整 CSS 的 class 名。

Modernizr 中文網modernizr.cn

Post CSS

PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.

PostCSS是一個很有趣的項目。簡而言之，它將CSS轉換成抽象語法樹(AST)，也就是JavaScript可以操作的一種數據形式。基於JavaScript的PostCSS插件可以執行不同的代碼操作。PostCSS本身並沒有改變你的CSS，它請允許插件執行和轉換你的代碼。

實際上，對於CSS的操作，PostCSS插件並沒有任何限制。只要你有想得到的，你都可以寫一個PostCSS插件來實現。

推薦閱讀：

TAG:瀏覽器兼容性 | HTMLCSS | 前端入門 |