Hvad er progressiv forbedring (Progressive Enhancement)?

Question

Accepted Answer

**Progressiv forbedring** er en strategi til at bygge fra et solidt, funktionelt **grundlag** (semantisk HTML, der fungerer overalt) og derefter *lagdele* CSS til præsentation og JavaScript til rigere adfærd — så kerneoplevelsen fungerer, selv hvis de øvre lag fejler. ## De tre lag ```text 1. HTML → content + functionality (works with no CSS/JS) 2. CSS → presentation/layout (enhances appearance) 3. JS → interactivity (enhances behavior) ``` ## Et konkret eksempel: en 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); }); ``` Hvis JavaScript ikke kan indlæses (ustabilt netværk, fejl, blokeret), fungerer formularen **stadig** via det oprindelige indsendelse — brugeren kan stadig søge. JS forbedrer kun *det*. ## Progressiv forbedring vs graceful degradation - **Progressiv forbedring** — start med grundlaget, byg *opad*. (Nedefra og op.) - **Graceful degradation** — start med den fuldt udstyrede version, sikr at det *forringes acceptabelt*. (Ovenfra og ned.) Progressiv forbedring er generelt mere robust, fordi grundlaget garanteret fungerer. ## Hvorfor det betyder noget Det producerer modstandsdygtige, tilgængelige, højtydende websteder: indhold er i HTML (godt for SEO, skærmfremlesere og langsomme/gamle enheder), siden kan bruges før/uden JS (hurtigere opfattet indlæsningstid, fungerer, hvis et script fejler), og forbedringer er en bonus i stedet for et krav. I en verden med varierede enheder, netværk og fejl — at bygge på et funktionerende HTML-core i stedet for at antage, at JS altid kører — holder et websted brugbart for alle. Moderne frameworks gentager dette med server-side rendering og "platformen fungerer først, hydration forbedrer".