你知道漸進加強和優雅降級嗎?[css3兼容性寫法]

寫在前面:

在前端開發的過程當中,若是有注意的話,發現有些寫css3屬性時,兼容性的寫法順序不太同樣,好比transition屬性,有些把transition放在前面有些是放在後面,這就引出了兩個概念:優雅降級和漸進加強。javascript

寫法栗子:css

.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,而在低級瀏覽器只保證最基本的功能html

何謂漸進加強:

漸進加強(Progressive Enhancement):一開始就針對低版本瀏覽器進行構建頁面,完成基本的功能,而後再針對高級瀏覽器進行效果、交互、追加功能達到更好的體驗。前端

何謂優雅降級:

優雅降級(Graceful Degradation):一開始就構建站點的完整功能,而後針對瀏覽器測試和修復。好比一開始使用 CSS3 的特性構建了一個應用,而後逐步針對各大瀏覽器進行 hack 使其能夠在低版本瀏覽器上正常瀏覽。java


支持漸進加強和優雅降級背後的思惟是什麼:

二者之間的微妙差異:

在本質上:「它們是看待同種事物的兩種觀點」,「優雅降級」和「漸進加強」的目的都是關注不一樣瀏覽器下的不一樣體驗,可是它們側重點不一樣,因此致使了工做流程上的不一樣。css3

漸進加強觀點認爲應關注於內容自己。請注意其中的差異:我甚至連「瀏覽器」三個字都沒提。內容是咱們創建網站的誘因。有的網站展現它,有的則收集它,有的尋求,有的操做,還有的網站甚至會包含以上的種種,但相同點是它們全都涉及到內容。這使得漸進加強成爲一種更爲合理的設計範例。這也是它當即被 Yahoo! 所採納並用以構建其「分級式瀏覽器支持 (Graded Browser Support)」策略的緣由所在。git

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

別說話,看圖:

工做流程上面的區別:

1.漸進加強(progressive enhancement):一開始只構建站點的最少特性,保證他們的內容,而後不斷地對版本較高的瀏覽器追加不一樣的功能web

2.優雅降級(graceful degradation):優雅降級是從複雜的現狀開始,並試圖減小用戶體驗的供給,就是針對版本較低的瀏覽器進行測試和修復segmentfault

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

相關文章
相關標籤/搜索