漸進增強和優雅降級之間的區別

2021-08-29 02:20:34 字數 1759 閱讀 6880

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

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

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

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

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

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

漸進增強觀點則認為應關注於內容本身。內容是我們建立**的誘因。有的**展示它,有的則收集它,有的尋求,有的操作,還有的**甚至會包含以上的種種,但相同點是它們全都涉及到內容。這使得漸進增強成為一種更為合理的設計範例。

讓我們來直觀的來看下兩者在可攜式的差別:

.transition

.transition

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

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

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

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

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

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

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

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

漸進增強與優雅降級之間的區別

漸進增強 progressive enhancement 針對低版本瀏覽器進行構建頁面,保證最基本的功能,然後再針對高階瀏覽器進行效果 互動等改進和追加功能達到更好的使用者體驗。優雅降級 graceful degradation 一開始就構建完整的功能,然後再針對低版本瀏覽器進行相容。區別 優雅降級...

優雅降級和漸進增強的區別

隨著前端的發展越來越繁榮,現在出現的概念性的越來越多,下面來介紹一下優雅降級和漸進增強的區別。優雅降級 專案開始就構建站點的完整功能,然後針對瀏覽器測試和修復。對低版本的瀏覽器就行相容性的修復。漸進增強 專案開始就針對低版本瀏覽器進行構建頁面,完成基本的功能,然後再針對高階瀏覽器進行效果 互動 追加...

優雅降級和漸進增強的區別

之前在看一些css3效果demo的時候,發現有些寫css3屬性時,相容性的寫法順序不太一樣,比如transition屬性,有些把transition放在前面有些是放在後面,當然這也有可能包含了coder個人的習慣或是強迫性 比如下面這兩種 transition transition 帶字首的排列應該...