好程式設計師web前端學習路線分享css3中的漸進增強和降級
好程式設計師web
前端學習路線分享
css3中的漸進增強和降級
,
漸進增強和降級這兩個概念是在 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)”策略的原因所在。
案例分析:
(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;
}
(2)字首CSS3(-webkit- / -moz- / -o-*)和正常CSS3在瀏覽器中的支援情況是這樣的:
很久以前:瀏覽器字首CSS3和正常CSS3都不支援;
不久之前:瀏覽器只支援字首CSS3,不支援正常CSS3;
現在:瀏覽器既支援字首CSS3,又支援正常CSS3;
未來:瀏覽器不支援字首CSS3,僅支援正常CSS3.
(3)漸進增強的寫法,優先考慮老版本瀏覽器的可用性,最後才考慮新版本的可用性。在時期3字首CSS3和正常CSS3都可用的情況下,正常CSS3會覆蓋字首CSS3。優雅降級的寫法,優先考慮新版本瀏覽器的可用性,最後才考慮老版本的可用性。在時期3字首CSS3和正常CSS3都可用的情況下,字首CSS3會覆蓋正常的CSS3。
就CSS3這種例子而言,我更加推崇漸進增強的寫法。因為字首CSS3的某些屬性在瀏覽器中的實現效果有可能與正常的CSS3實現效果不太一樣,所以最終還是得以正常CSS3為準。如果你好奇究竟是什麼屬性在字首CSS3和正常CSS3中顯式效果不一樣。
(4)如何抉擇
根據你的使用者所使用的客戶端的版本來做決定。請注意我的措辭,我沒有用瀏覽器,而是用客戶端。因為漸進增強和優雅降級的概念本質上是軟體開發過程中低版本軟體與高版本軟體面對新功能的相容抉擇問題。服務端程式很少存在這種問題,因為開發者可以控制服務端執行程式的版本,就無所謂漸進增強和優雅降級的問題。但是客戶端程式則不是開發者所能控制的(你總不能強制使用者去升級它們的瀏覽器吧)。我們所謂的客戶端,可以指瀏覽器,移動終端裝置(如:手機,平板電腦,智慧手錶等)以及它們對應的應用程式(瀏覽器對應的是網站,移動終端裝置對應的是相應的APP)。
現在有很成熟的技術,能夠讓你分析使用你客戶端程式的版本比例。如果低版本使用者居多,當然優先採用漸進增強的開發流程;如果高版本使用者居多,為了提高大多數使用者的使用體驗,那當然優先採用優雅降級的開發流程。
然而事實情況是怎麼樣的呢?絕大多數的大公司都是採用漸進增強的方式,因為業務優先,提升使用者體驗永遠不會排在最前面。
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69913892/viewspace-2655438/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 好程式設計師web前端分享CSS3 漸變程式設計師Web前端CSSS3
- 好程式設計師web前端分享初學者必看web前端學習路線圖程式設計師Web前端
- 好程式設計師web前端分享前端學習路線自學如何找到工作程式設計師Web前端
- 好程式設計師web前端學習路線分享前端基礎面試題程式設計師Web前端面試題
- 好程式設計師web前端學習路線分享函式基礎程式設計師Web前端函式
- 好程式設計師web前端學習路線分享Jsonp詳解程式設計師Web前端JSON
- 好程式設計師web前端學習路線分享滾動穿透方法程式設計師Web前端穿透
- 好程式設計師web前端學習路線分享web測試之Js中的函式程式設計師Web前端JS函式
- 好程式設計師web前端學習路線分享CSS浮動-文件流篇程式設計師Web前端CSS
- 好程式設計師web前端學習路線分享瞭解AJAX是什麼程式設計師Web前端
- 好程式設計師web前端分享Css3的概念和優勢程式設計師Web前端CSSS3
- 好程式設計師web前端學習路線分享CSS浮動-清除浮動篇程式設計師Web前端CSS
- 好程式設計師web前端學習路線分享HTML5常見面試題程式設計師Web前端HTML面試題
- 好程式設計師web前端培訓分享學習JavaScript程式設計師Web前端JavaScript
- 好程式設計師Web前端教程分享Vue學習心得程式設計師Web前端Vue
- 好程式設計師web前端學習路線之在JavaScript中使用getters和setter程式設計師Web前端JavaScript
- 好程式設計師web前端學習路線分享純css繪製各種圖形程式設計師Web前端CSS
- 好程式設計師web前端學習路線之Javascript物件導向程式設計師Web前端JavaScript物件
- 好程式設計師web前端分享應該怎樣學好web前端?程式設計師Web前端
- 好程式設計師web前端分享CSS3彈性盒程式設計師Web前端CSSS3
- 好程式設計師web前端培訓分享JavaScript學習指南程式設計師Web前端JavaScript
- 好程式設計師web前端分享Vue學習筆記(一)程式設計師Web前端Vue筆記
- 好程式設計師web前端分享想要學習前端需要學那些課程程式設計師Web前端
- 好程式設計師web前端分享前端 javascript 練習題程式設計師Web前端JavaScript
- 好程式設計師Java學習路線分享SpringCloud程式設計師JavaSpringGCCloud
- 好程式設計師web前端學習路線大廠面試題詳解程式設計師Web前端面試題
- 好程式設計師Java學習路線分享Java中的位移運算程式設計師Java
- 好程式設計師前端學習路線分享模擬JavaScript中物件導向技術程式設計師前端JavaScript物件
- 好程式設計師web前端培訓分享node學習筆記程式設計師Web前端筆記
- 好程式設計師web前端分享CSS學習:HSLA顏色模式程式設計師Web前端CSS模式
- 好程式設計師web前端培訓分享HTMLCSS學習筆記css3選擇器程式設計師Web前端HTMLCSS筆記S3
- 好程式設計師web前端學習路線分享AJAX狀態碼ajax.status及封裝程式設計師Web前端封裝
- 好程式設計師web前端分享前端javascript練習題三程式設計師Web前端JavaScript
- 好程式設計師web前端分享前端javascript練習題一程式設計師Web前端JavaScript
- 好程式設計師Java學習路線分享原生Ajax的使用程式設計師Java
- 好程式設計師web前端培訓分享JavaScript學習筆記函式進階程式設計師Web前端JavaScript筆記函式
- 好程式設計師web前端分享CSS Bug、CSS Hack和Filter學習筆記程式設計師Web前端CSSFilter筆記
- 好程式設計師Web前端分享前端CSS篇程式設計師Web前端CSS