你知道漸進增強和優雅降級嗎？[css3相容性寫法]

OBKoro1發表於2017-04-12
CSSS3

寫在前面：

在前端開發的過程中，如果有注意的話，發現有些寫css3屬性時，相容性的寫法順序不太一樣，比如transition屬性，有些把transition放在前面有些是放在後面，這就引出了兩個概念：優雅降級和漸進增強。

寫法栗子：

.transition { /*漸進增強寫法*/
  -webkit-transition: all .5s;
     -moz-transition: all .5s;
       -o-transition: all .5s;
          transition: all .5s;
}
.transition { /*優雅降級寫法*/
          transition: all .5s;
       -o-transition: all .5s;
     -moz-transition: all .5s;
  -webkit-transition: all .5s;
}複製程式碼

漸進增強和優雅降級概念出現的原因：

翻看進度條，會發現漸進增強和優雅降級這兩個概念是在 CSS3 出現之後火起來的。由於低階瀏覽器不支援 CSS3，但是 CSS3 特效太優秀不忍放棄，所以產生了的一種解決方式在高階瀏覽器中使用CSS3，而在低階瀏覽器只保證最基本的功能。

何謂漸進增強：

漸進增強（Progressive Enhancement）：一開始就針對低版本瀏覽器進行構建頁面，完成基本的功能，然後再針對高階瀏覽器進行效果、互動、追加功能達到更好的體驗。

何謂優雅降級：

優雅降級（Graceful Degradation）：一開始就構建站點的完整功能，然後針對瀏覽器測試和修復。比如一開始使用 CSS3 的特性構建了一個應用，然後逐步針對各大瀏覽器進行 hack 使其可以在低版本瀏覽器上正常瀏覽。

支援漸進增強和優雅降級背後的思維是什麼：

兩者之間的微妙差別：

在本質上：“它們是看待同種事物的兩種觀點”，“優雅降級”和“漸進增強”的目的都是關注不同瀏覽器下的不同體驗，但是它們側重點不同，所以導致了工作流程上的不同。

漸進增強觀點認為應關注於內容本身。請注意其中的差別：我甚至連“瀏覽器”三個字都沒提。內容是我們建立網站的誘因。有的網站展示它，有的則收集它，有的尋求，有的操作，還有的網站甚至會包含以上的種種，但相同點是它們全都涉及到內容。這使得漸進增強成為一種更為合理的設計範例。這也是它立即被 Yahoo! 所採納並用以構建其“分級式瀏覽器支援 (Graded Browser Support)”策略的原因所在。

優雅降級觀點認為應該針對那些最高階、最完善的瀏覽器來設計網站。而將那些被認為“過時”或有功能缺失的瀏覽器下的測試工作安排在開發週期的最後階段，並把測試物件限定為主流瀏覽器（如 IE、Mozilla 等）的前一個版本。在這種設計範例下，舊版的瀏覽器被認為僅能提供“簡陋卻無妨 (poor, but passable)” 的瀏覽體驗。你可以做一些小的調整來適應某個特定的瀏覽器。但由於它們並非我們所關注的焦點，因此除了修復較大的錯誤之外，其它的差異將被直接忽略。

別說話，看圖：

工作流程上面的區別：

1.漸進增強（progressive enhancement）：一開始只構建站點的最少特性，保證他們的內容，然後不斷地對版本較高的瀏覽器追加不同的功能

2.優雅降級（graceful degradation）：優雅降級是從複雜的現狀開始，並試圖減少使用者體驗的供給，就是針對版本較低的瀏覽器進行測試和修復

ps： 降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處於安全地帶;

廣義和狹義：

1.廣義：其實要定義一個基準線，在此之上的增強叫做漸進增強，在此之下的相容叫優雅降級。

2.狹義：漸進增強一般說的是使用CSS3技術，在不影響老瀏覽器的正常顯示與使用情形下來增強體驗，而優雅降級則是體現html標籤的語義，以便在js/css的載入失敗/被禁用時，也不影響使用者的相應功能。

栗子：

漸進增強的例子：

1.來自張鑫旭大神的栗子。

.transition { /*漸進增強寫法*/
  -webkit-transition: all .5s;
     -moz-transition: all .5s;
       -o-transition: all .5s;
          transition: all .5s;
}
.transition { /*優雅降級寫法*/
          transition: all .5s;
       -o-transition: all .5s;
     -moz-transition: all .5s;
  -webkit-transition: all .5s;
}複製程式碼

*字首CSS3（-webkit- / -moz- / -o-）和正常CSS3在瀏覽器中的支援情況是這樣的：

1.很久以前：瀏覽器字首CSS3和正常CSS3都不支援；
2.不久之前：瀏覽器只支援字首CSS3，不支援正常CSS3；
3.現在：瀏覽器既支援字首CSS3，又支援正常CSS3；
4.未來：瀏覽器不支援字首CSS3，僅支援正常CSS3.

ps：從這裡可以引申到其他有字首的css3的屬性，不要侷限在這個屬性裡。

優雅降級的例子：

4.假如你寫了一個表單，沒有用到input type="submit"表單元素，用了一個a標籤的click事件做提交，但如果Javascript被禁用了怎麼辦？
使用如下的文件結構，就可以在javascript被禁用時，依然可以提交。

<form>
    <input type="text">
    <input type="submit">
</form>複製程式碼

優雅降級需要正確地體現HTML標籤的語義，符合“瀏覽器的預期”。讓你的網頁在各種情況—下——包括降級（javascript被禁用，css傳輸失敗等等）的情形都可以運作良好。這是我理解的優雅降級的意義。

在網頁佈局中如何選擇？

如果軟體開發的預算和時間充足，就不存在抉擇的問題，可以兩者都調整到一個最佳狀態，而不用權衡，做選擇題了。然而現實很殘酷，要麼開發週期短，要麼開發預算少，或者二者兼而有之，這個時候該如何抉擇？就我個人而言，講講我的觀點。

分析使用你客戶端程式的版本比例。

如果低版本使用者居多，當然優先採用漸進增強的開發流程；

如果高版本使用者居多，為了提高大多數使用者的使用體驗，那當然優先採用優雅降級的開發流程。

大多數公司是怎麼處理這個問題的：

絕大多數的大公司都是採用漸進增強的方式，因為業務優先，提升使用者體驗永遠不會排在最前面。

例如：新浪微博網站前端的更新，擁有這種億級使用者的網站，絕對不可能追求某個特效而不考慮低版本使用者可不可用，一定是確保低版本到高版本的可訪問性，再去漸進增強，採用新功能給高版本使用者提供更好的使用者體驗。

但也不是沒有反例。如果你開發的是一款面向青少年的軟體（或網站）

你知道這個群體的人總是喜歡嘗試新事物，總是喜歡酷炫的特效，總是喜歡把它們的軟體更新到最新版本（而不像我們老一輩的使用者）。面對這種情況，漸進增強的開發流程實為上選。

PS： 其實優雅降級和漸進增強都是頁面的加分項，是針對技術的一種形而上的要求。保證儘可能多的使用者都能正常使用網站是第一步，在此之上才需要考慮降級的極端情形和現代瀏覽器的體驗增強。

參考來自：

漸進增強和優雅降級之間的有什麼不同？
需警惕CSS3屬性的書寫順序
漸進增強 VS 優雅降級
你能描述一下漸進增強和優雅降級之間的不同嗎?如果提到了特性檢測，可以加分。

最後：希望看完的朋友點個喜歡，也可以關注一下我，現在這階段基本上每個月都不會少於十五篇文章（看到乾貨我也會進行分享）。碼字不易，感謝支援，感激不盡！
ps：目前待業，座標北京，求推薦工作。然後希望我寫哪方面的文章可以在底下評論，或者是私信我，雖然寫的不好，但我就當這是記錄自己成長的一種方式咯。（前提是我會了，如果不會我也會記下來，等會了的時候再更出來。）
**掘金個人主頁 ，簡書主頁連結，csdn部落格主頁連結 ，github 。

以上。2017.4.12

相關文章