圖解css6：核心技術與案例實戰. 1.3 漸進增強

<b>1.3　漸進增強</b>

第一次聽到“漸進增強”（progressive enhancement）一詞是在前端重構交流會上。漸進增強并不是一種技術，而是一種開發的方式，更是一種web設計理念。首先思考一個問題：“網站是否需要在每個浏覽器中看起來都一樣？”帶着這個問題來看漸進增強。

<b>1.3.1　漸進增強與優雅降級</b>

正如前面所言，漸進增強是一種開發方式，更是一種設計理念。在編寫web頁面時，首先保證最核心的功能實作，讓任何低端的浏覽器都能看到站點内容，然後考慮使用進階但非必要的css和javascript等增強功能，為目前和未來的浏覽器提供更好的支援，給使用者帶來更好的體驗。

在設計的時候，先考慮低端裝置使用者能否看到所有内容，然後在此基礎之上為高端使用者進行設計。不僅為高端裝置使用者提供一個完美的應用，也要為不同性能級别裝置的使用者設計不同級别的不那麼完美的應用。這稱為“優雅降級”。

目前而言，雖對“漸進增強”有所了解的人很多，但是要說普及或深入還遠遠沒到時候。在大家平時的設計思維中有一種極強的固定思維，也就是想讓網站在各個浏覽器下表現一緻。這種出發點本身并沒有什麼問題，但是這樣會讓領先的浏覽器的優勢無法充分顯示出來。

是以，從今天開始要改變制作web站點的思維，讓網站能優雅降級，目标應該是——向盡可能多的使用者提供盡可能優質的使用者體驗。這跟使用者通路網站使用方式無關，無論通過iphone、高端的桌面系統、kindle，還是閱讀器，使用者都能得到盡可能獨特且完美的體驗。

<b>1.3.2　漸進增強的優點</b>

“向盡可能多的使用者提供盡可能優質的使用者體驗”這一目标聽起來相當不錯。有的人制作web站點時報怨，ie怎樣才具有css3的效果。誠然，我們不使用漸進增強也可以實作，如為一些舊浏覽器提供一套相容方案，確定頁面與現代浏覽器保持一緻。簡單來說就是在支援css3的浏覽器中使用css3特性，在不支援的浏覽器中另寫一套樣式來模拟css3效果，實作讓網站在所有浏覽器都一樣。

可以說，通過這種方法隻是讓低版本的浏覽器渲染頁面更好看一點，并沒有得到實質性的提高。

是以，如果網站始終無法做到一模一樣，為什麼不使用css3技術使它在現代浏覽器上看起來更靓麗呢？當然，某些css3特性在不支援的浏覽器中是“無法模拟”的，但使用漸進增強，就無須為了讓網站适合所有人而放棄這些技術。

css的漸進增強有别于css的hack。hack是浏覽器廠商的一種手法，用來增強自己的競争，而漸進增強起到錦上添花之效。是以前者應該盡量避免使用，而後者應該适當使用。

就樣式而言，漸進增強的對象是一些現代浏覽器，漸進增強的一些屬性主要是css3的一些特性，或是ie低級版本不支援的一些屬性，或是其他一些特殊情況。淘寶網上的一個例子如圖1-7所示。

這裡采用了css3的旋轉特性transform，滑鼠移上去時，三角會實作旋轉的動畫效果，并改變方向。之前，要實作圖1-7所示的旋轉效果，需要一大串javascript腳本。而使用transform僅僅需要幾行代碼。

#site-nave .menu:hover .menu-hd {

  -webkit-transform: rotate(180deg);

  -webkit-transform-origin-x:50%;

  -webkit-transform-origin-y:30%;

  -moz-transform: rotate(180deg);

  -moz-transform-origin-x:50%;

  -moz-transform-origin-y:30%;

  -o-transform: rotate(180deg);

  -o-transform-origin-x:50%;

  -o-transform-origin-y:30%;

  -ms-transform: rotate(180deg);

  -ms-transform-origin-x:50%;

  -ms-transform-origin-y:30%;

  transform:rotate(180deg);

  transform-origin-x: 50%;

  transform-origin-y: 30%;

}

采用漸進增強能給現代浏覽器使用者一個更好的體驗，在不支援css3的ie浏覽器也能正常使用，隻不過體驗會大打折扣。

以上隻是一個簡單的例子，本書後面還會介紹css3漸進增強的案例，例如text-shadow文字陰影、border-radius圓角屬性、box-shadow盒陰影屬性、css3漸變背景和css3選擇器等。