CSS “漸進增強”在web制作中常見應用舉例
一、“漸進增強”簡述
“漸進增強”是對”Progressive Enhancement”一詞的譯文，我覺得翻譯的很是得體。所謂“漸進增強”，有點農村包圍城市的味道。打個不太恰當的比方，就是要先解決廣大勞苦大眾的溫飽問題（即“漸進”），再這個基礎上盡量的往小康方向發展（謂“增強”），至於是否要所有的人都過着小康水平，則不強求，當然越多小康家庭越好，沒有也無妨，反正溫飽不成問題，至少不會餓死。
就目前而言，雖對“漸進增強”有所了解的人挺多，但是要說普及與深入人生還遠遠不到火候。再舉個不恰當的比方，現在就頁面重構而言，占據主流的還是“大鍋飯”思想，即人人平等，人人相等，也就是以各個瀏覽器下表現一致為准則。這本身沒有什么問題，大家都有飯吃，但是，顯而易見，這會讓領先的瀏覽器（Firefox、chrome等）優勢無法顯現出來。
CSS的“漸進增強”有別於CSS hack，hack可以說是提供選擇，你死我亡，競爭效應；而“漸進增強”屬於更進一步，錦上添花，輔助效應。前者應盡量避免使用，而后者適當使用則有裨益。
就CSS而言，“漸進增強”的對象是一些現代瀏覽器，“漸進增強”的一些屬性主要是CSS3的一些特性，或是IE6這類歪瓜裂棗不支持的一些屬性，或是其他一些特殊情況。本文就將舉一些簡單的，常見的“漸進增強”的應用，您會發現，適當使用“漸進增強”還是很不錯滴。
二、“漸進增強”之CSS3 text-shadow文字陰影屬性
就目前而言，大多數的頁面都是無投影文字，這是必須的。白底黑字，如果再有投影效果，一旦字多了，很容易造成視覺疲勞和審美疲勞，所以，平白朴實的文字效果反而是最受用的。但是，在有些地方，適當的添加一些投影效果，會有意想不到的效果。例如我的demo模板頁面的標題，在IE等不支持CSS3 text-shadow屬性的瀏覽器下就是下面這個樣子：
可以說，上面的標題文字很OK，顏色，字體，對比度而言，都沒有問題，可以說，這種效果已經很OK了。如果應用“漸進增強”原則，我們可以更進一步，做得更好，給標題文字增加一點白色的投影效果，看看結果如何，參見下圖，截自Firefox3.6：
增加一點白色的投影，形成一定的凹陷感，使得標題更加醒目，更加有力。可“漸進增強”的文字投影效果不僅僅是在標題上，按鈕可以說是另一個重點應用對象。我們可以拿淘寶首頁的一些按鈕舉例，好吧，就…就這個按鈕吧：
這個按鈕就是很傳統的按鈕，在各個瀏覽器下都是一個模樣的，確實，這個樣式沒有一點問題。但是，實際上，在某些瀏覽器下，我們可以讓它表現得更好，既然是基本上只賺不賠的買賣（唯一賠的就是字節數和一點渲染成本），我們何樂而不為呢？我們可以用小bug（我對firebug的昵稱）改一改樣式，結果如何呢？參見下圖：
簡單的一句樣式，就可以讓Firefox3.5+，chrome2，Safari4+，Opera10.5+用戶擁有更有質感，更加“按鈕”的按鈕，值得一試。
三、“漸進增強”之CSS3 border-radius圓角屬性
border-radius圓角屬性是我最早接觸並使用的圓角屬性，多用在個人站點或是測試頁面上，實例項目中很少用。因為如果單純地使用圓角屬性，必然的，在IE瀏覽器下就是個直角，這是不少設計師所不能容忍的，所以，兼容起見，目前多是使用圖片（淘寶、騰訊）或是CSS標簽模擬（Google）實現。但是，如果設計師與前端工程師或是頁面重構工程師溝通足夠，設計師本認識到位，漸進增強地實現圓角效果也是可以的。舉兩個現實的例子吧，一個是騰訊微博，另外一個就是gmail。
騰訊微博的信息輸入框可以說是使用border-radius圓角實現“漸進增強”最好的實例了。//zxx:我的企鵝微博：http://t.qq.com/iamzhangxinxu，這要感謝騰訊的艾文王的微博邀請。
其他先不說，但看下面IE6和Firefox3.6下的截圖：
可以看到，IE6（其他IE瀏覽器亦如此）下，文本框是直角的，而在Firefox火狐瀏覽器下，是個圓角，這是由於應用的CSS3圓角屬性造成了，IE不支持border-radius屬性，而Firefox3+都支持，所以才會有表現上的差異。但是，怎么講呢，其實直角也不錯，也很清爽，功能上該怎么用還是怎么用，所以，表現的差異是沒有任何關系的，IE的表現是基本表現，Firefox下的表現是加分表現，很OK，這就是典型的“漸進增強”。
我們現在把目光對准Google的gmail，去看看他是如何應用“漸進增強”的圓角效果的，當當當當，看下面的圖：
這里的按鈕的圓角效果就是使用的CSS3的border-radius屬性實現的，參見下面的代碼截圖：
記住這個按鈕，記住這里的代碼，下面我還會提到它。至於這里的圓角，與企鵝微博一樣，屬於“漸進增強”式的應用，就不重復敘述了。
四、“漸進增強”之CSS3 box-shadow盒陰影屬性
box-shadow盒陰影也是比較常用的CSS3屬性，顧名思意，實現盒狀的投影效果的，像是圖片，div標簽之流。關於盒陰影的“漸進增強”應用我在自己的博客中已經做過應用，在翻譯 – 逐漸消失的Flash網站 一文中尤其典型，您可以在IE瀏覽器和現代瀏覽器下查看這篇文章，對比圖片，就會發現不一樣之處。
在IE瀏覽器下，圖片就是圖片，如下圖，很正常，不會去砍小學生，幼兒園小朋友。
在IE瀏覽器下，圖片表現得相當的清純，就跟阿嬌一樣清純。但是，在現代瀏覽器下，如下圖，貌似有些公開的嫵媚了：
對比可以發現，在Firefox以及chrome鄧瀏覽器下，所有的文章內圖片都有效果上佳的陰影效果，code如下：
img{-moz-box-shadow:2px 2px 4px #333333; -webkit-box-shadow:2px 2px 4px #333333; box-shadow:2px 2px 4px #333333;}
本來圖片顯示就沒有任何問題，這里再給一些優秀的瀏覽器添加陰影效果，可謂錦上添花，這正是“漸進增強”。
五、“漸進增強”之CSS3 gradient漸變背景
關於CSS漸變背景，您可以參見我之前寫的3篇文章（CSS漸變之CSS3 gradient在Firefox3.6下的使用 、CSS gradient漸變之webkit核心瀏覽器下的使用 、CSS實現兼容性的漸變背景(gradient)效果 ），漸變背景屬性的支持較晚，Firefox3.6+才開始支持，但是這並不影響“漸進增強”原則的應用，先舉個實例吧，例如gmail郵箱，還是上面那個按鈕，還是那個樣式，上面的那個圓角按鈕不僅僅是個圓角按鈕，還是個漸變背景的按鈕，gmail可謂將“漸進增強”用到家了，居然應用了剛支持不久的漸變背景屬性，參見下面的截圖：
我個人覺得，就背景漸變而言，最好的“漸進增強”應用不在於按鈕，或是標題欄，而是控件背景。在大部分情況下，例如文本輸入框，背景都是透明或是白色的，也有使用灰白漸變圖片進行美化的，但是一般而言，要多調用一次圖片鏈接，大多數前沿的網站都不使用，都是默認的控件背景色，例如淘寶的搜索輸入框：
現在，我們試着在這個基礎上應用“漸進增強”，對其進行一定程度的美化，這里就是指背景漸變的美化了，使用firebug，在該樣式上再添加如下的代碼：
background:-moz-linear-gradient(top , #F2F2F2, #ffffff 8px);
結果在Firefox3.6下，顯示為下圖：
background:-moz-linear-gradient(top , #dddddd, #ffffff 10px);
如下圖：
雖然IE瀏覽器下依舊平板的背景，但是Firefox用戶以及Safari/Chrome瀏覽器用戶就有了更上佳的用戶體驗，這就是“漸進增強”。
六、CSS選擇器、偽類與“漸進增強”
CSS偽類也是“漸進增強”里面經常操刀的角色。這里就舉兩個比較常用的可行性高的例子，算是提供一個參考吧。
1. twitter與first-child
像twitter這樣的列表數據，常需要分隔線進行分隔，有時候會出現什么問題呢？就是邊框線多余，大多時候，我們可以使用relative或是margin負值進行重疊定位以消除，如淘寶首頁列表信息的分隔：
但是twitter的做法卻不是如此，其使用“漸進增強”原則，它的想法可能是這樣，最上面一個列表元素有個上邊框也無傷大雅，當然沒有最好，所以呢，為了解決布局的代碼成本，使用偽類“漸進增強”式的解決，當然，也有可能是twitter根本就不鳥IE6這廝！
2. :focus在漸進增強中的應用
眾多瀏覽器中，似乎僅有IE6/7不支持:focus偽類，:focus表示元素獲取焦點時的樣式，當失去焦點時會自動失去。考慮到兼容性，目前的做法往往是通過js切換focus與blur效果，或是不設置focus的樣式變化。其實我們可以應用“漸進增強”原則，設置一些獲取焦點的樣式。拿新浪微博右側的話題搜索框舉例，如下圖，在鼠標獲取焦點時，沒有任何的樣式變化（Firefox下）：
但是，如果我們有漸進增強的意識，我們可能就不會置之不理，例如，可能會添加類似下面的代碼：
logininput_r input:focus {border-color:#a0b3d6;}
產生的效果就是當這個搜索框獲取焦點時，會有一個邊框色，提醒用戶，已經獲取焦點，這也是提高用戶體驗的地方，您大可不必在意IE6/IE7這些小輩，這就是“漸進增強”。
可以說，“漸進增強”這一概念的誕生與兼容性不一是密切部分的，所以理論上，存在了表現上的兼容性，就可以應用“漸進增強”原則。
七、其他
正如上一小段提到了，存在兼容性差異，就有可能應用到“漸進增強”。舉個例子，文字溢出特定寬度“點點點”省略號表示，也就是text-overflow：ellipsis，貌似直到目前而言，Firefox還為支持該屬性，我們很多時候的做法就是直接溢出剪裁掉，這確實可以實現兼容性，但是，這對於支持此屬性的瀏覽器而言是不公平的，應用“漸進增強”，我們可以暫時將Firefox扔在一邊，這其中是沒有矛盾的，具體實現這里不多說，您可以參見我的這篇文章：關於文字內容溢出用點點點(…)省略號表示。
其他很多與之類似，就等您自己去思考去發掘了。