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

2022-07-04 07:48:12 字數 1340 閱讀 9646

有些css3效果demo,你會發現寫css3屬性時,相容性的寫法順序不太一樣。

比如transition屬性,有些把transition放在前面有些是放在後面:

.transition

.transition
帶字首的排列應該只是為了整齊吧(還是代表了對瀏覽器的喜好程度)?

都不是!transition放在前面還是後面引申的是兩個不同的概念:優雅降級和漸進增強。

優雅降級和漸進增強印象中是隨著css3流出來的乙個概念。

由於低階瀏覽器不支援css3,但css3的效果又太優秀不忍放棄,所以在高階瀏覽中使用css3而低階瀏覽器只保證最基本的功能。

咋一看兩個概念差不多,都是在關注不同瀏覽器下的不同體驗,

關鍵的區別是他們所側重的內容,以及這種不同造成的工作流程的差異。

什麼是漸進增強、優雅降級?

漸進增強 progressive enhancement:針對低版本瀏覽器進行構建頁面,保證最基本的功能,然後再針對高階瀏覽器進行效果、互動等改進和追加功能達到更好的使用者體驗。

優雅降級 graceful degradation:一開始就構建完整的功能,然後再針對低版本瀏覽器進行相容。

區別:

優雅降級是從複雜的現狀開始,並試圖減少使用者體驗的供給,

而漸進增強則是從乙個非常基礎的,能夠起作用的版本開始,並不斷擴充,以適應未來環境的需要。

降級(功能衰減)意味著往回看;而漸進增強則意味著朝前看,同時保證其根基處於安全地帶。

「優雅降級」觀點

「優雅降級」觀點認為應該針對那些最高端、最完善的瀏覽器來設計**。而將那些被認為「過時」或有功能缺失的瀏覽器下的測試工作安排在開發周期的最後階段,並把測試物件限定為主流瀏覽器(如 ie、mozilla 等)的前乙個版本。

在這種設計範例下,舊版的瀏覽器被認為僅能提供「簡陋卻無妨 (poor, but passable)」 的瀏覽體驗。你可以做一些小的調整來適應某個特定的瀏覽器。但由於它們並非我們所關注的焦點,因此除了修復較大的錯誤之外,其它的差異將被直接忽略。

「漸進增強」觀點

「漸進增強」觀點則認為應關注於內容本身。

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

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

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

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

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

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

區別 優雅降級是從複雜的現狀開始,並試圖減少使用者體驗的供給,而漸進增強則是從乙個非常基礎的,能夠起作用的版本開始,並不斷擴充,以適應未來環境的需要。降級 功能衰減 意味著往回看 而漸進增強則意味著朝前看,同時保證其根基處於安全地帶 優雅降級和漸進增強只是看待同種事物的兩種觀點。優雅降級和漸進增強都...