前端開發之優雅降級與漸進增強

2022-08-03 18:15:13 字數 2441 閱讀 6554

一圖勝千言

印象中,漸進增強和優雅降級這兩個概念是在 css3 出現之後火起來的。由於低階瀏覽器不支援 css3,但是 css3 特效太優秀不忍放棄,所以在高階瀏覽器中使用css3,而在低階瀏覽器只保證最基本的功能。二者的目的都是關注不同瀏覽器下的不同體驗,但是它們側重點不同,所以導致了工作流程上的不同。

漸進增強(progressive enhancement):一開始就針對低版本瀏覽器進行構建頁面,完成基本的功能,然後再針對高階瀏覽器進行效果、互動、追加功能達到更好的體驗。

優雅降級(graceful degradation):一開始就構建站點的完整功能,然後針對瀏覽器測試和修復。比如一開始使用 css3 的特性構建了乙個應用,然後逐步針對各大瀏覽器進行 hack 使其可以在低版本瀏覽器上正常瀏覽。

其實漸進增強和優雅降級並非什麼新概念,只是舊的概念換了乙個新的說法。在傳統軟體開發中,經常會提到向上相容向下相容的概念。漸進增強相當於向上相容,而優雅降級相當於向下相容。向下相容指的是高版本支援低版本的或者說後期開發的版本支援和相容早期開發的版本,向上相容的很少。大多數軟體都是向下相容的,比如說office2010能開啟office2007,office2006,office2005,office2003等建的word檔案,但是用office2003就不能開啟用office2007,office2010等建的word檔案!

優雅降級和漸進增強只是看待同種事物的兩種觀點。優雅降級和漸進增強都關注於同一**在不同裝置裡不同瀏覽器下的表現程度。關鍵的區別則在於它們各自關注於何處,以及這種關注如何影響工作的流程。

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

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

看如下這兩段**的書寫順序,表示了我們開發的著重點。

.transition 

.transition

字首css3(-webkit-/ -moz- / -o-*)和正常css3在瀏覽器中的支援情況是這樣的:

很久以前:瀏覽器字首css3和正常css3都不支援

不久之前:瀏覽器只支援字首css3,不支援正常css3;

現在:瀏覽器既支援字首css3,又支援正常css3;

未來:瀏覽器不支援字首css3,僅支援正常css3.

漸進增強的寫法,優先考慮老版本瀏覽器的可用性,最後才考慮新版本的可用性。在時期3字首css3和正常css3都可用的情況下,正常css3會覆蓋字首css3。優雅降級的寫法,優先考慮新版本瀏覽器的可用性,最後才考慮老版本的可用性。在時期3字首css3和正常css3都可用的情況下,字首css3會覆蓋正常的css3。

就css3這種例子而言,我更加推崇漸進增強的寫法。因為字首css3的某些屬性在瀏覽器中的實現效果有可能與正常的css3實現效果不太一樣,所以最終還是得以正常css3為準。如果你好奇究竟是什麼屬性在字首css3和正常css3中顯式效果不一樣,可以看看這篇文章《需警惕css3屬性的書寫順序》。

如果軟體開發的預算和時間充足,就不存在抉擇的問題。然而現實很殘酷,要麼開發周期短,要麼開發預算少,或者二者兼而有之,這個時候該如何抉擇?就我個人而言,講講我的觀點。

現在有很成熟的技術,能夠讓你分析使用你客戶端程式的版本比例。如果低版本使用者居多,當然優先採用漸進增強的開發流程;如果高版本使用者居多,為了提高大多數使用者的使用體驗,那當然優先採用優雅降級的開發流程。

軟體開發中,從來就沒有銀彈。具體的抉擇,請讀者視情況而定

漸進增強與優雅降級

漸進增強 progressive enhancement 一開始就針對低版本瀏覽器進行構建頁面,完成基本的功能,然後再針對高階瀏覽器進行效果 互動 追加功能達到更好的體驗。優雅降級 graceful degradation 一開始就構建站點的完整功能,然後針對瀏覽器測試和修復。比如一開始使用 css...

漸進增強與優雅降級

漸進增強 div1 優雅降級 div1帶css3字首的3個滿足了大部分瀏覽器,而不帶字首的只有最新的一部分瀏覽器才支援。漸進增強 觀點認為應關注於內容本身。內容是建立 的誘因,我們應該在滿足向絕大部分使用者呈現有用內容的前提下,再做渲染內容或更高階功能的事情。優雅降級 觀點則認為應該針對那些最高端 ...

漸進增強與優雅降級

優雅降級 graceful degradation 一開始就構建站點的完整功能,然後針對瀏覽器測試和修復。ps 比如一開始使用 css3 的特性構建了乙個應用,然後逐步針對各大瀏覽器進行 hack,使其可以在低版本瀏覽器上正常瀏覽。transition漸進增強 progressive enhance...