Progressive enhancement is een strategie waarbij je begint met een solide, functionele basis (semantische HTML die overal werkt) en vervolgens CSS voor presentatie en JavaScript voor rijkere functionaliteit in lagen toevoegt — zodat de kernervaring werkt, zelfs als de bovenste lagen falen.
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);
});
Als JavaScript niet laadt (slecht netwerk, fout, geblokkeerd), werkt het formulier nog steeds via de native submit — de gebruiker kan nog steeds zoeken. JS verbetert het alleen maar.
Progressive enhancement is over het algemeen robuuster omdat de basis gegarandeerd werkt.
Het levert weerbarstige, toegankelijke en krachtige sites op: content zit in de HTML (goed voor SEO, schermlezers en trage/oude apparaten), de pagina is bruikbaar vóór/zonder JS (snellere waargenomen laden, werkt als een script faalt), en verbeteringen zijn een bonus in plaats van een vereiste.
In een wereld met diverse apparaten, netwerken en storingen zorgt bouwen op een werkende HTML-kern — in plaats van ervan uit te gaan dat JS altijd werkt — ervoor dat een site voor iedereen bruikbaar blijft.
Moderne frameworks weerspiegelen dit met server-side rendering en "het platform werkt eerst, hydration verbetert."