漸進增強和優雅降級

2021-09-29 13:11:49 字數 1601 閱讀 6675

由於低階瀏覽器不支援 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

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

就css3這種例子而言,我更加推崇漸進增強的寫法。因為字首css3的某些屬性在瀏覽器中的實現效果有可能與正常的css3實現效果不太一樣,所以最終還是得以正常css3為準。

根據你的客戶的客戶端版本決定:

整理自:

漸進增強和優雅降級

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

優雅降級 和漸進增強

優雅降級和漸進增強 關注同一 在不同的瀏覽器 下的表現程度 優雅降級 graceful degradation 相當於向下相容 使高版本支援低版本 或者後期開發的版本支援早期開發的版本 優雅降級觀點認為應該針對那些最高端 最完善的瀏覽器來設計 漸進增強 progressive enhancement...

優雅降級和漸進增強

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