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

資訊專(zhuān)欄INFORMATION COLUMN

雜談：漸進(jìn)增強(qiáng)與優(yōu)雅降級(jí)

hiyang / 2750人閱讀

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

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

漸進(jìn)增強(qiáng)（Progressive Enhancement）

一開(kāi)始就針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面，完成基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互、追加功能達(dá)到更好的體驗(yàn)。

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

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

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

二者區(qū)別

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

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

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

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

代碼案例 
.transition { /*漸進(jìn)增強(qiáng)寫(xiě)法*/
  -webkit-transition: all .5s;
     -moz-transition: all .5s;
       -o-transition: all .5s;
          transition: all .5s;
}
.transition { /*優(yōu)雅降級(jí)寫(xiě)法*/
          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；

未來(lái)：瀏覽器不支持前綴CSS3，僅支持正常CSS3.

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

現(xiàn)實(shí)項(xiàng)目開(kāi)發(fā)中，推薦使用漸進(jìn)增強(qiáng)的寫(xiě)法（postcss的autofixer也是這種寫(xiě)法），因?yàn)榍熬YCSS3的某些屬性在瀏覽器中的實(shí)現(xiàn)效果有可能與正常的CSS3實(shí)現(xiàn)效果不太一樣，所以最終還是得以正常CSS3為準(zhǔn)。

可參考張?chǎng)涡翊笊竦奈恼隆缎杈鐲SS3屬性的書(shū)寫(xiě)順序。

如何選擇

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

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

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

參考文章

漸進(jìn)增強(qiáng)、優(yōu)雅降級(jí)

漸進(jìn)增強(qiáng) VS 優(yōu)雅降級(jí)

漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)之間的有什么不同?

需警惕CSS3屬性的書(shū)寫(xiě)順序

優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)的區(qū)別

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

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

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

相關(guān)文章

  • 雜談：漸進(jìn)增強(qiáng)與優(yōu)雅降級(jí)

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

    王軍 評(píng)論0 收藏0

  • 雜談：漸進(jìn)增強(qiáng)與優(yōu)雅降級(jí)

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

    SimonMa 評(píng)論0 收藏0

  • 前端面試題-漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)

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

    HollisChuang 評(píng)論0 收藏0

  • 漸進(jìn)增強(qiáng)與優(yōu)雅降級(jí)

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

    only_do 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<