Progressiv förbättring är en strategi för att bygga från en solid, funktionell baslinje (semantisk HTML som fungerar överallt) och sedan lägga till CSS för presentation och JavaScript för rikare beteende — så kärnupplevelsen fungerar även om de övre lagren misslyckas.
1. HTML → content + functionality (works with no CSS/JS)
2. CSS → presentation/layout (enhances appearance)
3. JS → interactivity (enhances behavior)
<!-- Layer 1: works on its own — submits to the server, full page reload -->
<form action="/search" method="get">
<input name="q" type="search" required />
<button>Search</button>
</form>
// 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);
});
Om JavaScript misslyckas att ladda (ostabil nätverk, fel, blockerad) fungerar formuläret fortfarande via det ursprungliga inskickningen — användaren kan fortfarande söka. JS endast förbättrar det.
Progressiv förbättring är i allmänhet mer robust eftersom grunden är garanterad att fungera.
Det producerar motståndskraftiga, tillgängliga och högpresterande webbplatser: innehållet finns i HTML (bra för SEO, skärmläsare och långsamma/gamla enheter), sidan är användbar före/utan JS (snabbare upplevd inläsning, fungerar om ett skript felar) och förbättringar är en bonus snarare än ett krav.
I en värld av olika enheter, nätverk och fel, att bygga på en fungerande HTML-kärna — snarare än att anta att JS alltid körs — håller en webbplats användbar för alla.
Moderna ramverk ekar detta med rendering på serversidan och »plattformen fungerar först, hydrering förbättrar.«