css_16 | CSS——CSS 拓展：① 瀏覽器兼容

時間 2019-11-06

標籤 css 拓展瀏覽器兼容欄目 CSS 简体版

原文原文鏈接

本文推薦 PC 端閱讀~

本文版權歸 「公衆號 | 前端一萬小時」 全部，未經受權，請勿轉載！
複製代碼

css_16
複製代碼

1. 漸進加強和優雅降級分別是什麼意思？
 2. 什麼是 CSS Hack？在哪一個網站查看標籤（屬性）的瀏覽器兼容狀況？
 3. IE六、7 的 Hack 寫法是？
 4. 儘量多的列舉瀏覽器兼容的處理範例？
 5. CSS Reset 是什麼？CSS 預編譯器是什麼？後編譯器（PostCSS）是什麼？
 6. CSS Reset 和 Normalize.css 有什麼區別？
 7. 儘量多的寫出瀏覽器兼容性問題？
 8. 如何讓 Chrome 瀏覽器顯示小於 12px 的文字？
 9. CSS 預處理器的比較：Less、Sass？
10. 常見兼容性問題？
複製代碼

前言： 什麼是瀏覽器兼容問題？同一份代碼，有的瀏覽器效果正常，有的不正常。其實最主要就是對 IE 瀏覽器的兼容問題。能夠大體分爲：
A 級兼容（Chrome、Firefox、IE9+）：要保證在最新瀏覽器上完美實現設計稿；
B 級兼容（IE8）：能用且差異不大；
C 級兼容（IE7 如下）：能用。css

1 處理兼容問題的思路

首先以最大程度完善設計稿爲基礎，再考慮兼容性，不能盲目爲了兼容問題而棄用方便簡潔的新方法（如 HTML五、CSS3）；固然也不能用過新的技術方法使得兼容性過於低、實用性差。html

漸進加強和優雅降級

1.1 漸進加強（Progressive enhancement）

針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。前端

1.2 優雅降級（Graceful degradation）

一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。html5

1.3 區別

優雅降級是從複雜的現狀開始，並試圖減小用戶體驗的供給；而漸進加強則是從一個很是基礎的，可以起做用的版本開始，並不斷擴充，以適應將來環境的須要。
降級（功能衰減）意味着往回看，而漸進加強則意味着朝前看，同時保證其根基處於安全地帶。

1.3.1 要不要作？

產品的角度（產品的受衆、受衆的瀏覽器比例、效果優先仍是基本功能優先）
成本的角度 (有無必要作某件事)

1.3.2 作到什麼程度？

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

1.3.3 如何作？

（現階段的前端工做，90% 都不須要去管 IE8 如下的兼容問題，工做重心最主要仍是集中在 JS 。對於瀏覽器兼容不須要花太多精力，理解相關的解決思路就行了。）瀏覽器

根據兼容需求選擇技術框架、庫——用的時候留一個心眼就行：

Bootstrap (>=IE8)
jQuery 1.~ (>=IE6), jQuery 2.~ (>=IE9)
Vue (>=IE9)
...
複製代碼

根據兼容需求選擇兼容工具（html5shiv.js、Respond.js、CSS Reset、Normalize.css、Modernizr）；安全
PostCSS ；bash
一些老的技術手段，如：條件註釋（處理 IE 的方式）、 CSS Hack、JS 能力檢測作一些修補。框架

1.4 條件註釋

條件註釋（conditional comment）是 HTML 源碼中被 IE 有條件解釋的語句。條件註釋可被用來向 IE 提供及隱藏代碼。工具

項目	範例	說明
!	[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
\	[if (IE 6)(IE 7)]	IE6 或者 IE7

例：動畫

<!--[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 中沒法正常工做， IE10 再也不支持條件註釋。

1.5 CSS Hack

（用一些奇怪的手段達到兼容的方式！）

因爲不一樣廠商的瀏覽器，好比 Internet Explorer、Safari、Mozilla Firefox、Chrome 等，或者是同一廠商的瀏覽器的不一樣版本，如 IE6 和 IE7，對 CSS 的解析認識不徹底同樣，所以會致使生成的頁面效果不同，得不到咱們所須要的頁面效果。

這個時候咱們就須要針對不一樣的瀏覽器去寫不一樣的 CSS，讓它能在不一樣的瀏覽器中也能獲得咱們想要的頁面效果。

常見 Hack 寫法：
（💡 browserhacks.com 查 Hack 的寫法）

.box {
  color: red;
  _color: blue; /*IE6 下它生效*/
  *color: pink; /*IE六、7 下它生效*/
  color: yellow\9;  /*IE/Edge 6-8 下它生效*/
}


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

2 常見屬性的兼容狀況

屬性名	兼容性
inline-block	>=IE8
min-width/min-height	>=IE8
::before, ::after	>=IE8
div:hover	>=IE7
inline-block	>=IE8
background-size	>=IE9
圓角	>=IE9
陰影	>=IE9
動畫/漸變	>=IE10

（💡 caniuse.com 查 CSS 屬性兼容）

3 常見兼容處理範例

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
.clearfix {
  *zoom: 1; /* 僅對 IE六、7 有效 */
}
複製代碼

.target{
  display: inline-block;
  *display: inline;
  *zoom: 1;
}
複製代碼

<!--[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]-->
複製代碼

<!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]-->
複製代碼

4 一些處理兼容的工具總結

4.1 條件註釋

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

4.2 IE Hack

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

4.3 JS 能力檢測

使用 JS 的語法檢測瀏覽器支持的屬性，以便展現效果。

4.4 html5shiv.js

用於解決 IE9 如下版本瀏覽器對 HTML5 新增標籤不識別，並致使 CSS 不起做用的問題。因此咱們在使用過程當中，想要讓低版本的瀏覽器，即 IE9 如下的瀏覽器支持，那麼這款 html5shiv.js 是一個很是好的選擇！

4.5 Respond.js

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

4.6 CSS Reset

將瀏覽器的默認樣式所有去掉，更準確說就是經過從新定義標籤樣式，「覆蓋」瀏覽器的 CSS 默認屬性。

4.7 Normalize.css

Normalize.css 只是一個很小的 CSS 文件，但它在默認的 HTML 元素樣式上提供了跨瀏覽器的高度一致性。相比於傳統的 CSS Reset，Normalize.css 是一種現代的、爲 HTML5 準備的優質替代方案。Normalize.css 是一個能夠定製的 CSS 文件，它讓不一樣的瀏覽器在渲染網頁元素的時候形式更統一。

🚀它能夠：

保留有用的默認值，不一樣於許多 CSS Reset 的簡單粗暴所有抹掉；
標準化的樣式，適用範圍廣的元素；
糾正錯誤和常見的瀏覽器的不一致性；
一些細微的改進，提升了易用性；
使用詳細的註釋來解釋代碼。

4.8 Modernizr

Modernizr 是一個 JavaScript 庫，用於檢測用戶瀏覽器的 HTML5 與 CSS3 特性。
Modernizr 使你能夠方便地爲各類狀況編寫 JavaScript 和 CSS，不管瀏覽器是否支持這些特性。這是處理漸進加強的完美方案。
Modernizr 會在頁面加載後當即檢測特性，而後建立一個包含檢測結果的 JavaScript 對象，同時在 HTML 元素加入方便你調整 CSS 的 class 名。

（🏆⚠️如下知識點咱們會在「前端綜合」裏邊專門用一篇文章來說解，目前咱們先熟悉相關概念，沒必要深究！）

4.9 後編譯 PostCSS

它提供了一種方式用 JavaScript 代碼來處理 CSS。它負責把 CSS 代碼解析成抽象語法樹結構（Abstract Syntax Tree，AST），再交由插件來進行處理。插件基於 CSS 代碼的 AST 所能進行的操做是多種多樣的，好比能夠支持變量和混入（mixin），增長瀏覽器相關的聲明前綴，或是把使用未來的 CSS 規範的樣式規則轉譯（transpile）成當前的 CSS 規範支持的格式。

💡簡單來講： 它能夠被理解爲一個平臺，可讓一些插件在上面跑，它提供了一個解析器，能夠將 CSS 解析成抽象語法樹，經過 PostCSS 這個平臺，咱們可以開發一些插件來處理 CSS。熱門插件如 Autoprefixer ，它能夠幫咱們處理兼容問題，只需正常寫 CSS，Autoprefixer 能夠幫咱們自動生成兼容性代碼。

💡與 PostCSS 相關的知識點：「CSS 預編譯器」——預編譯器的做用是加強了 CSS 語法，讓咱們能夠在 CSS 中使用變量、循環、嵌套等功能，主要表明是 Less、Sass 、Stylus，它們本質上就是一種編譯器。

後記： 對於瀏覽器兼容咱們主要仍是理解這個處理思路，熟悉一些範例，而後在實際寫頁面的過程當中有選擇的去複用便可。

祝好，qdywxs ♥ you！