Ce este progressive enhancement?

Question

Accepted Answer

**Progressive enhancement** este o strategie de construire din punct de plecare solid, functional **baza** (HTML semantic care functioneaza peste tot) si apoi *adaugarea in straturi* de CSS pentru prezentare si JavaScript pentru comportament mai bogat — asa incat experienta de baza functioneaza chiar daca straturile superioare esueaza. ## Cele trei straturi ```text 1. HTML → content + functionality (works with no CSS/JS) 2. CSS → presentation/layout (enhances appearance) 3. JS → interactivity (enhances behavior) ``` ## Un exemplu concret: un formular ```html ``` ```js // Layer 3: IF JS is available, enhance it into a live AJAX search form.addEventListener("submit", (e) => { e.preventDefault(); // upgrade to fetch — no reload fetchResults(form.q.value); }); ``` Daca JavaScript nu reuseste sa se incarce (retea instabila, eroare, blocat), formularul **inca functioneaza** prin trimiterea nativa — utilizatorul poate inca cauta. JS doar il *imbunatateste*. ## Progressive enhancement vs graceful degradation - **Progressive enhancement** — incepe cu baza, construieste *in sus*. (De jos in sus.) - **Graceful degradation** — incepe cu versiunea completa, asigura-te ca se *degradeaza* acceptabil. (De sus in jos.) Progressive enhancement este in general mai robust deoarece baza este garantata sa functioneze. ## De ce este important Produces site-uri reziliente, accesibile si performante: continutul este in HTML (bun pentru SEO, cititoare de ecran si dispozitive lente/vechi), pagina este utilizabila inainte/fara JS (incarcarea perceputa mai rapida, functioneaza daca un script esueaza), si imbunatatirile sunt un bonus in loc de o cerinta. Intr-o lume de dispozitive, retele si esecuri variate, construirea pe baza unui nucleu HTML care functioneaza — in loc sa presupui ca JS ruleaza intotdeauna — pastreaza un site utilizabil pentru toata lumea. Framework-urile moderne reiau aceasta cu server-side rendering si "platforma functioneaza mai intai, hidratarea imbunatateste."