Tehnici de degradare treptată a css. Este timpul să reconsiderați prefixele furnizorilor CSS

Cu siguranță, Internet Explorer conţine un număr mare de erori în versiuni diferite, dar cu ajutorul comentarii condiționate pot fi tratate prin căutarea eliminării lor. Dar ceea ce nimic nu poate repara este că IE este iremediabil depășit. În timp ce alte browsere includ din ce în ce mai multe proprietăți CSS3 și acceptă diverse tehnologii noi, IE marchează timpul. Lansarea IE9 nu va rezolva problema; versiunile anterioare nu vor dispărea peste noapte. In astfel de situatie cea mai bună soluție va exista o degradare grațioasă - principiul menținerii performanței atunci când se pierde o anumită funcționalitate.

Să împărțim asta în un mic exemplu, care afișează text într-un bloc și un buton. Blocul și butonul au colțuri rotunjite, iar blocului este adăugată și o mică umbră. Până acum, browserele pentru CSS3 folosesc în principal proprietăți specifice cu propriile lor prefixe:

  • Firefox - proprietăți care încep cu -moz-;
  • Safari și Chrome - proprietăți care încep cu -webkit-;
  • Opera - proprietăți care încep cu -o-.

Diferitele versiuni ale acestor browsere pot înțelege unele proprietăți atât cu cât și fără prefix, așa că pentru universalitate adaugă mai multe proprietăți simultan. Deci, pentru a crea colțuri rotunjite avem nevoie de următorul stil.

Moz-border-radius: 10px; /* Pentru Firefox */ -webkit-border-radius: 10px; /* Pentru Safari și Chrome */ border-radius: 10px; /* Pentru Opera și IE9 */

Deși utilizarea acestor proprietăți va duce la invalid Cod CSS, în acest caz este mai important să lucrezi în Browsere Firefox 1.0, Safari 3.1, Chrome 2.0, Opera 10.50, IE9, precum și versiunile lor mai vechi. Exemplul 1 arată cum să utilizați proprietățile CSS3 pentru a crea umbre și colțuri rotunjite.

Exemplul 1. Bloc cu umbră

XHTML 1.0 CSS 2.1 CSS3 IE 8 IE 9+ Cr Op Sa Fx

bloc

Trebuie să parcurgeți 20 de întrebări care sunt selectate aleatoriu din baza de date. Pentru a trece testul, este suficient să răspunzi corect la cel puțin 75% dintre întrebările propuse (15 sau mai multe întrebări).

Rezultatul exemplului este prezentat în Fig. 1.

Orez. 1. Blocați vizualizarea în Safari

Același exemplu în browserul IE8 și mai jos este prezentat în Fig. 2.

Orez. 2. Vizualizare bloc în IE8

Deși aspectul elementelor diferă în detaliu, funcționalitatea paginii în ansamblu rămâne aceeași. Butonul poate fi apăsat, textul rămâne același, inclusiv culoarea și fundalul și nu există erori de afișare. De fapt, diferența este doar în lucrurile mărunte care îndeplinesc mai degrabă funcții decorative decât practice. Toate principiile degradării grațioase sunt îndeplinite.

Ce oferă această abordare în practică?

  • Vă permite să utilizați în mod activ proprietățile decorative ale CSS3 fără a ține cont de browser.
  • Motivează să folosească diferite efecte CSS3.
  • Ușurează semnificativ viața dezvoltatorului, deoarece nu mai trebuie să caute soluții pentru browsere învechite.
  • Accelerează productivitatea muncii.

Desigur, degradarea grațioasă nu este întotdeauna aplicabilă. Dacă cerințele de aspect indică suport pentru versiuni mai vechi, atunci va trebui să căutați solutii alternative, de exemplu, utilizați imagini pentru colțurile rotunjite. Dar, în cea mai mare parte, cerințele pentru aspect sunt stabilite fără a ține cont de situația generală. Și dacă comparăm toate avantajele degradării grațioase cu dezavantajul, care se manifestă doar prin faptul că browsere învechite, în special, IE8 nu afișează pagina suficient de „frumos”, atunci simpatiile vor fi de partea progresului.

De la autor: Prefixul -webkit- este atât de comun în CSS astăzi încât unele site-uri refuză să funcționeze corect fără el. În timp ce pentru dezvoltatori, prefixele CSS ale furnizorului în ultimii doi ani au însemnat un semn direct nu tocmai treaba perfecta proprietăți, acest lucru a determinat Mozilla să facă un pas disperat, dar necesar. În Firefox 46 sau 47 (lansat în aprilie sau mai 2016), Mozilla intenționează să introducă suport pentru o serie de prefixe non-standard –webkit- pentru a îmbunătăți compatibilitatea browser-ului cu acel prefix (chiar și pe dispozitivele mobile).

Ideea nu este nouă Microsoft Edge acceptă, de asemenea, diverse prefixe -webkit- pentru compatibilitate. Opera a început să accepte prefixele -webkit- în 2012, apoi a trecut la motorul Webkit Blink. W3C și dezvoltatorii de browser nu au planificat să folosească acest prefix în dezvoltarea site-ului web:

„Politica oficială W3C prevede că proprietățile experimentale nu trebuie folosite în codul site-ului. Cu toate acestea, oamenii le folosesc pentru că doresc ca site-urile lor să folosească cea mai recentă tehnologie și să arate cool.”— Pagina W3C despre optimizarea conținutului pentru diferite browsere

Cu toate acestea, dezvoltatorii doresc întotdeauna să acceseze cele mai recente funcții cât mai repede posibil. Prefixele vânzătorilor au dat totul peste cap și au dat dominație Webkit, dar cred că prefixele au avut un impact enorm asupra dezvoltării rapide a Internetului.

Metodele Mozilla și Microsoft vor dăuna doar majorității site-urilor. Majoritatea site-urilor vor avea deja conectate prefixele –moz- sau se va dovedi că cu cel nou Actualizare Mozilla va suporta proprietăți noi fără a fi nevoie de modificări. Cu toate acestea, în calitate de dezvoltatori web profesioniști, trebuie să lămurim acest lucru și să înțelegem că unele modele pot produce rezultate mixte. Este posibil să știți deja care dintre proiectele dvs. vor fi distruse de această actualizare. Dezvoltatori web, este timpul să vă regândiți abordarea cu privire la prefixele furnizorilor și să le testați pe site-uri.

Prefixe noi

Mozilla va include o serie de prefixe –webkit-. Din ceea ce am adunat, se pare că Mozilla nu are intenția de a-și potrivi lista cu proprietățile Edge. Nu toate proprietățile trebuie să fie compatibile cu motorul Mozilla. Printre prefixele pe care Mozilla le va adăuga, judecând după pagina wiki Compatibilitate/Mobil/Compatibilitate non-standard, se numără următoarele:

Webkit - pentru gradienți

Webkit-transformă

Webkit-tranziții

Webkit-aspect

Webkit-background-clip

Raportul-pixeli-dispozitiv-Webkit

Webkit-animație

Alte proprietăți pot fi în @-webkit-keyframes.

Testarea între browsere va fi critică

Dacă tu, dezvoltator web, nu ai inclus prefixul -moz- pentru a nu testa noi proprietăți CSS în Firefox, iar termenul limită se apropie, iar clientul te obligă să adaugi acest prefix, atunci va trebui să retestezi site-ul în Firefox 46 sau 47. Aceste versiuni vor fi lansate în aprilie sau mai, așa că mai aveți timp.

Pentru a vă testa site-ul web fără a aștepta Firefox 46/47, puteți activa aceste modificări în Firefox Nightly setând layout.css.prefixes.webkit în about:config. Dacă aveți cea mai recentă versiune de Nightly instalată, valoarea implicită ar trebui să fie adevărată. Nu toate modificările prefixului -webkit- funcționează încă în Firefox Nightly, dar este totuși un loc bun pentru a testa cum va arăta site-ul dvs. în curând. Aș aștepta până în martie înainte de a testa serios site-ul în Firefox Nightly.

Mult mai important, Microsoft Edge interpretează și afișează deja prefixele -webkit- într-un mod similar. Aceasta înseamnă că orice stil WebKit de pe site-ul dvs. este deja afișat într-un browser care a fost complet neașteptat. Dacă nu ați lucrat încă cu acest browser, atunci instalați Windows 10 și obțineți acces la el pentru a testa site-urile.

Prefixele furnizorilor dispar treptat

Din fericire, prefixele furnizorilor dispar treptat pe măsură ce echipele de dezvoltare găsesc soluții noi. Echipa Chrome/Blink și-a schimbat puțin abordarea:

„În continuare, în loc să activăm prefixele furnizorului în mod implicit, vom păstra proprietățile obișnuite în spatele steagului „Activați proprietățile platformei web experimentale” în about:flags până când acele proprietăți sunt activate în mod implicit.”Echipa The Chrome/Blink

Echipa Firefox a urmat o cale similară: „Directia principală de lucru la Mozilla acum este îndepărtarea prefixelor de furnizor, prin dezactivarea acestora sau transferarea lor în starea proprietăților obișnuite, dacă acestea sunt deja stabile. Aceasta este cel puțin politica noastră generală; cazurile individuale merită excepții. »— Boris de la Mozilla

Microsoft Edge vizează, de asemenea, eliminarea suportului pentru prefix: „Microsoft încearcă, de asemenea, să scape de prefixele de furnizor din Edge. Aceasta înseamnă că dezvoltatorii nu vor trebui să adauge un prefix special pentru browserul Edge atunci când folosesc etichete HTML5 speciale sau proprietăți CSS. În schimb, dezvoltatorii vor scrie cod standard.”— Mashable

Degradarea grațioasă folosind prefixe nu mai funcționează

Îndepărtarea de la prefixele de furnizor înseamnă un singur lucru – tehnica degradării grațioase prin prefixe nu mai este o opțiune. Izolarea anumitor browsere prin prefixe de furnizor (de exemplu, pentru Chrome) nu a fost scopul acestor prefixe; Dezvoltatorii au fost întotdeauna încurajați să folosească toate prefixele (–webkit- la –o-). Dacă utilizați orice funcționalitate care funcționează pe proprietăți cu prefixe de furnizor și ați folosit și tehnica de degradare grațioasă în designul dvs. pentru alte browsere, atunci aceasta nu mai funcționează.

Concluzie

Vremurile se schimbă. Dominația lui WebKit a fost neintenționată și a provocat agitație și incompatibilitate pe Internet. Alte browsere caută să extindă compatibilitatea prin adăugarea de prefixe –webkit-. Treptat, odată cu dispariția prefixelor de vânzător, cel această problemă. Dezvoltatorii ar trebui să verifice dacă utilizarea prefixelor nu provoacă consecințe nedorite în browserele non-WebKit.

Sunt confuz cu privire la care este diferența Creștere gradualăȘi Degradări grațioase. Mie mi se par una și aceeași.

ai putea sa-mi explici diferentele dintre ele si in ce situatie as folosi una fata de alta?

8 56 2010-03-31 08:05:38

8 raspunsuri:

Sunt aproape exact la fel, dar sunt diferite în context.

Există o clasă de browsere numită „A Grade Browsers”. Aceștia sunt membrii publicului dvs. tipici care (probabil) reprezintă majoritatea vizitatorilor dvs. Veți începe cu un nivel de bază al acestor utilizatori. Să-i spunem cele mai bune practici moderne.

Dacă doriți să crește experiență pentru cei care folosesc ocazional FF3. 6 sau Safari 4 sau vreun alt dezvoltator whizbang nightly webkit ce vrei să faci lucruri uimitoare cum ar fi

  • colțuri rotunjite prin css
  • text umbrit (dar vă rog lui Dumnezeu, nu prea mult)
  • aruncă umbră (vezi mai sus în paranteze)

Îți fac site-ul să arate minunat, dar nu îl vor sparge. Acest creștere graduală. Îmbrățișarea viitorului dintr-o perspectivă cele mai bune practici.

pe de altă parte, site-ul tău de nișă Nintendo atrage un număr destul de mare de utilizatori IE5. Săracul de tine, dar vrei și să te asiguri că ei continuă să se întoarcă. Puteți oferi o alternativă la comportamentul dvs. ajax prin includerea unui script ajax în fișier extern, iar dacă JS-ul lor nu este inclus, este posibil ca linkurile dvs. să actualizeze întreaga pagină. etc. Din punct de vedere cele mai bune practici moderne, vei vedea că unele piețe istorice sunt deservite o aparență de site web funcțional. Acest degradare grațioasă.

Ele sunt practic identice, dar diferă în ceea ce privește prioritatea pentru multe echipe de dezvoltare: PE este destul de drăguț dacă aveți timp, dar GD este adesea necesar

Dacă site-ul dvs. arată la fel de bine în toate browserele, dar unele browsere primesc, să zicem, ponei dansatori pentru că acceptă poneii dansatori, atunci aceasta este o îmbunătățire progresivă. Funcționează în toate browserele, dar unele browsere primesc ceva în plus. În mod obișnuit, termenul se aplică anumitor caracteristici Javascript care pot îmbunătăți gradul de utilizare dincolo de „HTML brut”.

Dacă site-ul dvs. arată doar așa cum veți vedea în browserele care acceptă pe deplin, de exemplu, CSS3 și IE8 - aceeași pagină se va afișa fără, de exemplu, colturi rotunjite, atunci aceasta este o degradare grațioasă. Site-ul este într-adevăr conceput pentru browsere moderne, dar este încă utilizabil în browsere mai vechi, doar că nu la fel de elegant.

la urma urmei, sunt într-adevăr același lucru, priviți din ambele părți puncte diferite viziune.

direcție de la cea selectată baza Conceptele sunt diferite pentru fiecare.

degradarea grațioasă începe la nivelul de experiență ideal al utilizatorului și scade în funcție de capabilitățile agentului utilizator la un nivel minim, servind agenții care nu acceptă anumite caracteristici utilizate de linia de bază.

Îmbunătățirea progresivă începe de la experiența minimă largă a consumatorului și crește în funcție de capacitățile agentului de consum până la un nivel mai capabil, oferind agenților care acceptă funcții mai avansate decât linia de bază.

Cred că ambele concepte ar putea fi folosite dacă timpul/bugetul permite. Dacă nu, atunci degradarea grațioasă ar fi de preferat.

Îmi pare rău că am reînviat ceva care a trecut mai bine de un an, dar am simțit că aș putea contribui, într-un fel, cu propria mea opinie despre această problemă.

Deși sunt de acord cu Alex Mcp și deceze în anumite privințe, termenii „degradare grațioasă” și „îmbunătățire progresivă” au semnificații ușor diferite față de ceea ce reprezintă eu.

degradari gratioase De multe ori (după părerea mea) pare a fi mai mult un stick să trimiți o cerere în depunere după ce a fost construită prost în primul rând din experiența mea. Ca și cum cineva construiește un obiect javascript uriaș care oferă utilizatorului ceva cu adevărat cool cu ​​care să se joace, până când apare un manager, verifică chestia și toată lumea țipă, ridică mâinile când vine în atenție, că aplicația lor nu nu funcționează în 35% dintre browsere. Mai bine să ofere cineva o soluție pentru asta.”

Creștere graduală deși (și acesta este un termen atât de bun de spus) ar părea că este mai mult despre crearea a ceva care să funcționeze, la un nivel de bază, peste tot, folosind cele mai de bază tehnici disponibile, pentru a oferi toată funcționalitatea de care are nevoie utilizatorul. Acest lucru poate fi apoi adăugat cu ajutorul unor ajutoare discrete, stiluri etc., acest lucru îmbunătățește de fapt experiența de utilizare a aplicației în cauză, mai degrabă decât o face abia utilizabilă. „Ceea ce arată grozav. Funcționează în IE6. Oh, da. Chiar funcționează”

Cred că, poate, oferind stilul ca exemplu pentru ambii termeni din primele două răspunsuri aici, nu se observă problema reală de utilizare, care este creștere graduală adesea decide prin natura unde degradari gratioase ignoră până când totul merge prost.

Răsărit peste...

degradarea grațioasă este practica de a vă proiecta funcționalitatea web astfel încât să ofere un anumit nivel de experiență utilizator într-un mod mai browsere moderne, dar se va degrada și cu grație la un nivel de utilizator mai scăzut în browserele mai vechi. Acest nivel inferior nu este la fel de grozav de utilizat pentru vizitatorii site-ului dvs., dar le oferă totuși funcționalitatea de bază pe care au venit pe site-ul dvs. să le folosească; lucrurile nu se strică pentru ei.

îmbunătățirea progresivă este similară, dar face opusul. Începeți prin a stabili un nivel de bază al experienței utilizatorului pe care toate browserele îl vor putea oferi atunci când redați site-ul dvs., dar creați și funcții mai avansate care vor fi automat disponibile pentru browserele care îl pot utiliza.

cu alte cuvinte, degradarea grațioasă începe cu complexitatea status quo-ului și încearcă să repare pentru mai puțină experiență, în timp ce îmbunătățirea progresivă începe cu un exemplu foarte simplu și funcțional și permite o expansiune constantă pentru mediile viitoare. A degrada cu grație înseamnă a privi înapoi, în timp ce a te ridica progresiv înseamnă a privi înainte, ținând picioarele pe pământ solid.

Degradări grațioase

degradari gratioase capacitatea unui computer, mașină, sistem electronic sau rețea de a menține o funcționalitate limitată chiar și atunci când o mare parte din acestea au fost distruse sau inutilizabile. Scopul, desigur, este de a preveni eșecul catastrofal.

degradarea grațioasă este o soluție. Este practica de a crea un site web sau o aplicație astfel încât să ofere un nivel bun de experiență utilizator în browserele moderne. Cu toate acestea, se degradează cu grație pe browserele mai vechi. Este posibil ca sistemul să nu fie la fel de frumos sau frumos, dar funcționalitatea de bază va funcționa pe sisteme mai vechi.

Un exemplu simplu este utilizarea PNG-urilor transparente Alpha pe 24 de biți. Aceste imagini pot fi afișate pe browserele moderne fără probleme. IE5. 5 și IE6 ar arăta imaginea, dar Efectele de transparență ar eșua (acest lucru poate fi făcut să funcționeze dacă este necesar). Browserele mai vechi care nu acceptă PNG vor afișa text alternativ sau spațiu alb.

Dezvoltatorii care acceptă degradarea grațioasă specifică adesea nivelul lor de suport pentru browser, cum ar fi browserele de nivel 1 (experiență mai bună) și browsere de nivel 2 (experiență degradată).

Creștere graduală

creștere graduală este o strategie de web design care pune accent pe accesibilitate, semantică Marcaj HTMLși tehnologii externe de foaie de stil și scripting. Îmbunătățirea progresivă utilizează tehnologia web într-o formă cu mai multe straturi, care permite oricui să acceseze conținutul și funcționalitatea de bază ale unei pagini web folosind orice browser sau conexiune la internet, oferind, în același timp, o versiune îmbunătățită a paginii celor cu un nivel mai avansat. software browser sau o lățime de bandă mai mare.

crestere progresiva ca diagramă schematică spre o deteriorare gratioasa dar in sens invers. Site-ul web sau aplicația va stabili o experiență de bază pentru utilizator pentru majoritatea browserelor. Mai multe funcții avansate vor fi adăugate atunci când browserul îl acceptă.

Îmbunătățirea progresivă nu necesită să selectăm browsere acceptate sau să revenim la aspecte tabelare. Alegem nivelul de tehnologie, adică browserul trebuie să accepte HTML 4.01 și solicitări/răspunsuri de pagină standard.

pentru a fi mai ușor, trebuie doar să setați bara chiar în partea de sus, apoi puteți ignora îmbunătățirea progresivă. Când optiune noua ies sa ridice stacheta ;)

sau, alternativ, setați ștacheta la cel mai scăzut nivel (posibil trap?) și utilizați doar o creștere progresivă.

În acest articol, vom încerca să înțelegem diferența dintre două principii ale creării unei pagini bazate pe design web responsive: Progressive Enhancement și Graceful Degradation.

Degradare grațioasă

Degradarea grațioasă sau „toleranța la eșec” este un concept mai larg care se aplică nu numai designului web. Într-un sens general, implică capacitatea unui sistem de a funcționa chiar dacă unele dintre componentele sale defectează. Și cu cât defecțiunea este mai gravă, cu atât calitatea sistemului sau lucrul cu sistemul este mai scăzută, dar, în același timp, funcționalitatea principală a sistemului rămâne operațională.

Degradarea grațioasă poate fi exprimată în capacitatea de a lucra cu JavaScript dezactivat, în afișarea precisă a site-ului într-un browser fără suport pentru specificația CSS3, în afișarea adecvată a site-ului cu imagini dezactivate. Toate aceste erori nu ar trebui să afecteze funcționarea aplicației web. Cu toate acestea, dacă totul funcționează, atunci este mult mai convenabil pentru utilizator să folosească site-ul.

Dacă luăm în considerare exemplu concret, de exemplu, în domeniul proiectării interfeței web, acest principiu poate fi formulat ca „sistemul poate funcționa cu JavaScript complet dezactivat, dar cu JavaScript activat va fi mult mai convenabil să lucrezi cu”. Întrebarea nu este dacă ar putea exista o situație în care JS este dezactivat sau nu funcționează complet sau de ce se întâmplă acest lucru. Această situație este luată ca o dată. Designerul trebuie să dezvolte o interfață care va continua să funcționeze, deși cu JS dezactivat.

Adesea, pentru a urma acest principiu, trebuie să refaceți logica de procesare a formularelor pe partea serverului. Cu toate acestea, această abordare va da roade dacă vă gândiți la toleranța la erori în etapa de planificare a formularului.

Respectarea principiului degradării grațioase permite utilizatorilor (și fiecare utilizator este un potențial client) să poată lucra cu site-ul în orice situație.

Îmbunătățire progresivă

Îmbunătățirea progresivă este un principiu care, împreună cu dispozitivul mobil în primul rând, creează baza teoretică pentru designul web responsive. Numele său spune deja că poziționează crearea unei pagini web în etape, ciclic, după principiul „de la simplu la complex”. La fiecare dintre etapele pre-planificate, aspectul paginii ar trebui să devină mai frumos, mai bun și mai convenabil, dar toate funcționalitățile ar trebui să fie disponibile inițial.

Este un caz mai special de degradare grațioasă , deoarece toate paginile web construite pe acesta vor respecta pe deplin principiul degradării grațioase.

De obicei, crearea unei pagini folosind principiul îmbunătățirii progresive constă în următorii pași:

  • Crearea unei pagini pe o bază „curată”.HTML
    În această etapă, este creată o pagină complet funcțională, care constă doar din cod HTML, care este corect din punct de vedere semantic și logic și, prin urmare, poate fi interpretată de orice browser, chiar și de cel mai simplu. În această etapă, nu se efectuează nicio formatare, iar browserul însuși formatează pagina conform standardelor care sunt incluse în ea. Îmbunătățirea progresivă insistă că prima etapă este cea mai importantă, deoarece nu există nimic mai valoros pe web decât conținutul.
    Mic de statura: crearea unei structuri de document semantică și logică
  • Adăugarea de reguliCSS
    În această etapă, se folosește un tabel CSS de format vechi: se adaugă o grilă de marcare, se poziționează elemente, se aplică imagini de fundal blocurilor, se modifică stilurile, culorile și stilurile de text. În general, pagina capătă un nou aspect stilizat, devenind mai frumos și mai plăcut.
    Mic de statura: dând aspectul unui document
  • Aplicarea CSS3
    Acum puteți aplica documentului toate efectele și îmbunătățirile oferite de specificația CSS3. Adică, adăugați transluciditate, umbre, colțuri rotunjite pentru blocuri, tranziții animate netede pentru pseudo-clase sau elemente de formă.
    Mic de statura: oferind perfectiune aspect document
  • Crearea de scripturi peJavaScript
    În această etapă sunt create toate efectele și principiile de interacțiune ale paginii web cu utilizatorul. folosind JavaScript. Acestea includ solicitări AJAX, încărcare dinamică sau validare a datelor, efecte de animație și widget-uri (de exemplu, Prototype sau jQuery). În general, facem pagina mai ușor de utilizat.
    Mic de statura: interacțiune, interactivitate, comoditate

Să încercăm să aplicăm această abordare în practică. Vom dezvolta și proiecta un formular simplu de autentificare pe site. În prima etapă, vom crea un formular de autentificare în HTML pur. Forma nu este atât de frumoasă, dar este complet funcțională. Mai jos este codul paginii și rezultatul afișat în browser:

Acum, în al doilea pas, vom da formei un stil, aplicând acesteia o foaie de stil care conține doar acele reguli care sunt aplicabile CSS fără proprietăți speciale. Să adăugăm o culoare de fundal, umplutură, aliniere. Acum forma arată mai bine:

Acum să adăugăm regulile din specificația CSS3. Să adăugăm colțuri la blocuri, umbre pentru câmpurile de introducere a textului, să stilăm butonul și să folosim noi selectoare pentru a elimina umplutura inutilă din partea de sus. Obținem o formă îmbunătățită:

În ultima etapă, putem crea o solicitare AJAX, astfel încât utilizatorul să poată accesa site-ul fără a fi nevoie să reîncarce pagina.

În acest caz, la fiecare etapă specifică (dacă este acceptată de browser), va fi afișată o pagină complet funcțională. Dar dacă browserul acceptă tehnologii mai avansate, atunci pagina se îmbunătățește.

Ce principiu ar trebui să urmezi?

Dacă amplasamentul este construit cât mai eficient posibil, conform conceptului de degradare grațioasă, atunci rezultatul va fi aproximativ același cu ceea ce s-ar întâmpla dacă s-ar folosi îmbunătățirea progresivă. Deci, care este diferența atunci?

Faptul este că construirea unui site web bazat pe principiul degradării grațioase este destul de dificilă, deoarece puțini dezvoltatori o pot face eficient. În cel mai simplu caz de degradare grațioasă, puteți face următoarele: creați un site web pentru ultima versiune browser și apoi afișați utilizatorilor un mesaj care le spune că trebuie să descarce versiune noua browser. În același timp, dezvoltatorilor nu le pasă cum arată site-ul în browserele mai vechi. Un alt exemplu de degradare proastă grațioasă este oprire completă funcționalitatea site-ului când JavaScript este dezactivat. Un exemplu izbitor este trimiterea de mesaje pe Facebook.com.

Prin urmare, îmbunătățirea progresivă a apărut ca răspuns la degradarea grațioasă de calitate slabă. Proiectarea unor astfel de interfețe a devenit mai ușoară și de mai bună calitate, deoarece există etape clar definite pentru crearea unei interfețe.

ÎN design receptiv există conceptul de „în primul rând mobil”, care într-un fel corespunde conceptului de îmbunătățire progresivă, deoarece solicită acțiuni de la simplu la complex, de la ecrane mobile la PC-uri desktop. De aceea, cheia pentru aplicarea corectă a designului web responsive depinde de capacitatea dezvoltatorului de a aplica principiile îmbunătățirii progresive și mai întâi pe mobil.

Acțiune