Hva er progressiv forbedring?

Question

Accepted Answer

**Progressiv forbedring** er en strategi for å bygge fra et solid, funksjonelt **grunnlag** (semantisk HTML som fungerer overalt) og deretter *lag på* CSS for presentasjon og JavaScript for rikere atferd — slik at kjerneopplevelsen fungerer selv om de øvre lagene mislykkes. ## De tre lagene ```text 1. HTML → content + functionality (works with no CSS/JS) 2. CSS → presentation/layout (enhances appearance) 3. JS → interactivity (enhances behavior) ``` ## Et konkret eksempel: et skjema ```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 laster (dårlig nettverk, feil, blokkert), **fungerer skjemaet fortsatt** via innebygd innsending — brukeren kan fortsatt søke. JS *forbedrer* det bare. ## Progressiv forbedring vs elegant degradering - **Progressiv forbedring** — start med grunnlaget, bygg *opp*. (Nedenfra og opp.) - **Elegant degradering** — start med den fullt utstyrte versjonen, sørg for at den *degraderes* akseptabelt. (Ovenfra og ned.) Progressiv forbedring er generelt mer robust fordi grunnlaget er garantert å fungere. ## Hvorfor det er viktig Det produserer motstandsdyktige, tilgjengelige og ytelsessterk nettsteder: innhold er i HTML (godt for SEO, skjermlesere og trege/gamle enheter), siden kan brukes før/uten JS (raskere opplevd innlasting, fungerer hvis et skript feiler), og forbedringer er en bonus i stedet for et krav. I en verden av varierte enheter, nettverk og feil, bygger på en fungerende HTML-kjerne — i stedet for å anta at JS alltid kjører — holder et nettsted brukbart for alle. Moderne rammeverk gjengir dette med server-side rendering og "plattformen fungerer først, hydrasjon forbedrer."