国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

雜談：漸進增強與優(yōu)雅降級

hiyang / 2743人閱讀

摘要：而漸進增強和優(yōu)雅降級兩種不同的開發(fā)流程，也是在我們項目初期做調(diào)研選型時會考慮的一個點。二者區(qū)別漸進增強和優(yōu)雅降級只是看待同種事物的兩種觀點。漸進增強和優(yōu)雅降級都關(guān)注于同一網(wǎng)站在不同設(shè)備里不同瀏覽器下的表現(xiàn)程度。

作為一名前端開發(fā)人員，最頭疼的莫過于瀏覽器兼容。遠古時期萬惡的IE6，到現(xiàn)在CSS3不兼容的IE7/8.為了保證不同版本瀏覽器都有共同或更優(yōu)化的用戶體驗，前端搬磚的我們不得不與瀏覽器兼容頑強斗爭。而漸進增強和優(yōu)雅降級兩種不同的開發(fā)流程，也是在我們項目初期做調(diào)研選型時會考慮的一個點。

漸進增強（Progressive Enhancement）

一開始就針對低版本瀏覽器進行構(gòu)建頁面，完成基本的功能，然后再針對高級瀏覽器進行效果、交互、追加功能達到更好的體驗。

優(yōu)雅降級（graceful degradation）

一開始就構(gòu)建站點的完整功能，然后針對瀏覽器測試和修復(fù)。比如一開始使用 CSS3 的特性構(gòu)建了一個應(yīng)用，然后逐步針對各大瀏覽器進行 hack 使其可以在低版本瀏覽器上正常瀏覽。

初一看這兩個概念有點高大上，其實作為開發(fā)人員來說，多多少少已經(jīng)在項目中運用只是你自己不察覺而已。換個詞匯就比較好理解了，漸進增強（向上/前兼容），優(yōu)雅降級（向下兼容），向上兼容高版本瀏覽器，向下兼容低版本瀏覽器。

二者區(qū)別

漸進增強和優(yōu)雅降級只是看待同種事物的兩種觀點。漸進增強和優(yōu)雅降級都關(guān)注于同一網(wǎng)站在不同設(shè)備里不同瀏覽器下的表現(xiàn)程度。關(guān)鍵的區(qū)別則在于它們各自關(guān)注的著重點不同，以及這種不同的關(guān)注點如何影響項目開發(fā)的流程。

優(yōu)雅降級觀點認(rèn)為應(yīng)該針對那些最高級、最完善的瀏覽器來設(shè)計網(wǎng)站。而將那些被認(rèn)為“過時”或有功能缺失的瀏覽器下的測試工作安排在開發(fā)周期的最后階段，并把測試對象限定為主流瀏覽器（如 Chrome，Safari，IE、FireFox等）的前一個版本。在這種設(shè)計范例下，舊版的瀏覽器被認(rèn)為僅能提供“簡陋卻無妨 (poor, but passable)” 的瀏覽體驗。你可以做一些小的調(diào)整來適應(yīng)某個特定的瀏覽器。但由于它們并非我們所關(guān)注的焦點，因此除了修復(fù)較大的錯誤之外，其它的差異將被直接忽略。

漸進增強觀點則認(rèn)為應(yīng)關(guān)注于內(nèi)容本身。請注意其中的差別：我甚至連“瀏覽器”三個字都沒提。內(nèi)容是我們建立網(wǎng)站的誘因。有的網(wǎng)站展示它，有的則收集它，有的尋求，有的操作，還有的網(wǎng)站甚至?xí)陨系姆N種，但相同點是它們?nèi)忌婕暗絻?nèi)容。這使得漸進增強成為一種更為合理的設(shè)計范例。這也是它立即被 Yahoo! 所采納并用以構(gòu)建其“分級式瀏覽器支持 (Graded Browser Support)”策略的原因所在。

概括：優(yōu)雅降級是從復(fù)雜的現(xiàn)狀開始，并試圖減少用戶體驗的供給，而漸進增強則是從一個非常基礎(chǔ)的，能夠起作用的版本開始，并不斷擴充，以適應(yīng)未來環(huán)境的需要。降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶

代碼案例 
.transition { /*漸進增強寫法*/
  -webkit-transition: all .5s;
     -moz-transition: all .5s;
       -o-transition: all .5s;
          transition: all .5s;
}
.transition { /*優(yōu)雅降級寫法*/
          transition: all .5s;
       -o-transition: all .5s;
     -moz-transition: all .5s;
  -webkit-transition: all .5s;
}
// -webkit- / -moz- / -o- (瀏覽器前綴)

很久以前：瀏覽器前綴CSS3和正常CSS3都不支持；

不久之前：瀏覽器只支持前綴CSS3，不支持正常CSS3；

現(xiàn)在：瀏覽器既支持前綴CSS3，又支持正常CSS3；

未來：瀏覽器不支持前綴CSS3，僅支持正常CSS3.

漸進增強的寫法，優(yōu)先考慮老版本瀏覽器的可用性，最后才考慮新版本的可用性。在時期3中前綴CSS3和正常CSS3都可用的情況下，正常CSS3會覆蓋前綴CSS3。優(yōu)雅降級的寫法，優(yōu)先考慮新版本瀏覽器的可用性，最后才考慮老版本的可用性。在時期3中前綴CSS3和正常CSS3都可用的情況下，前綴CSS3會覆蓋正常的CSS3。

現(xiàn)實項目開發(fā)中，推薦使用漸進增強的寫法（postcss的autofixer也是這種寫法），因為前綴CSS3的某些屬性在瀏覽器中的實現(xiàn)效果有可能與正常的CSS3實現(xiàn)效果不太一樣，所以最終還是得以正常CSS3為準(zhǔn)。

可參考張鑫旭大神的文章《需警惕CSS3屬性的書寫順序。

如何選擇

低版本瀏覽器用戶占比居多，優(yōu)先采用漸進增強的開發(fā)流程；

高版本瀏覽器用戶占比居多，優(yōu)先采用優(yōu)雅降級的開發(fā)流程；

事實上絕大多數(shù)的大公司都是采用漸進增強的方式，因為業(yè)務(wù)優(yōu)先，提升用戶體驗永遠不會排在最前面。例如，淘寶，京東，新浪微博等網(wǎng)站前端的更新，不可能追求某個特效而不考慮低版本用戶可不可用，一定是確保低版本到高版本的可訪問性，再去漸進增強，采用新功能給高版本用戶提供更好的用戶體驗。當(dāng)然也有一些反例如阿里云，本身就是面向軟件開發(fā)者，這個群體的人總是喜歡嘗試新事物，總是喜歡酷炫的特效，總是喜歡把它們的軟件更新到最新版本，而且大多用的是谷歌瀏覽器，即使用IE瀏覽器，也是高版本IE瀏覽器，面對這種情況，優(yōu)雅降級的開發(fā)流程才是更好的選擇。

參考文章

漸進增強、優(yōu)雅降級

漸進增強 VS 優(yōu)雅降級

漸進增強和優(yōu)雅降級之間的有什么不同?

需警惕CSS3屬性的書寫順序

優(yōu)雅降級和漸進增強的區(qū)別

作者：以樂之名
本文原創(chuàng)，有不當(dāng)?shù)牡胤綒g迎指出。轉(zhuǎn)載請指明出處。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/113593.html

相關(guān)文章

  • 雜談：漸進增強與優(yōu)雅降級

    摘要：而漸進增強和優(yōu)雅降級兩種不同的開發(fā)流程，也是在我們項目初期做調(diào)研選型時會考慮的一個點。二者區(qū)別漸進增強和優(yōu)雅降級只是看待同種事物的兩種觀點。漸進增強和優(yōu)雅降級都關(guān)注于同一網(wǎng)站在不同設(shè)備里不同瀏覽器下的表現(xiàn)程度。 作為一名前端開發(fā)人員，最頭疼的莫過于瀏覽器兼容。遠古時期萬惡的IE6，到現(xiàn)在CSS3不兼容的IE7/8.為了保證不同版本瀏覽器都有共同或更優(yōu)化的用戶體驗，前端搬磚的我們不得不與...

    王軍 評論0 收藏0

  • 雜談：漸進增強與優(yōu)雅降級

    摘要：而漸進增強和優(yōu)雅降級兩種不同的開發(fā)流程，也是在我們項目初期做調(diào)研選型時會考慮的一個點。二者區(qū)別漸進增強和優(yōu)雅降級只是看待同種事物的兩種觀點。漸進增強和優(yōu)雅降級都關(guān)注于同一網(wǎng)站在不同設(shè)備里不同瀏覽器下的表現(xiàn)程度。 作為一名前端開發(fā)人員，最頭疼的莫過于瀏覽器兼容。遠古時期萬惡的IE6，到現(xiàn)在CSS3不兼容的IE7/8.為了保證不同版本瀏覽器都有共同或更優(yōu)化的用戶體驗，前端搬磚的我們不得不與...

    SimonMa 評論0 收藏0

  • 前端面試題-漸進增強和優(yōu)雅降級

    摘要：一背景介紹漸進增強和優(yōu)雅降級這兩個概念是在出現(xiàn)之后火起來的。二概念理解漸進增強漸進增強一開始就針對低版本瀏覽器進行構(gòu)建頁面，完成基本的功能，然后再針對高級瀏覽器進行效果交互追加功能達到更好的體驗。 一、背景介紹 漸進增強和優(yōu)雅降級這兩個概念是在 CSS3 出現(xiàn)之后火起來的。由于低級瀏覽器不支持 CSS3，但是 CSS3 特效太優(yōu)秀不忍放棄，所以在高級瀏覽器中使用CSS3，而在低級瀏覽器...

    HollisChuang 評論0 收藏0

  • 漸進增強與優(yōu)雅降級

    摘要：代碼展示漸進增強優(yōu)雅降級帶前綴的個滿足了大部分瀏覽器，而不帶前綴的只有最新的一部分瀏覽器才支持。如何選擇漸進增強觀點認(rèn)為應(yīng)關(guān)注于內(nèi)容本身。優(yōu)雅降級觀點則認(rèn)為應(yīng)該針對那些最高級最完善的瀏覽器來設(shè)計網(wǎng)站。 1.代碼展示 /*漸進增強*/ .div1 { -webkit-transition: all 2s; //Safari Chrome ...

    only_do 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<