Progressive enhancement is a strategy of building from a solid, functional baseline (semantic HTML that works everywhere) and then layering on CSS for presentation and JavaScript for richer behavior — so the core experience works even if the upper layers fail.
The three layers
1. HTML → content + functionality (works with no CSS/JS)
2. CSS → presentation/layout (enhances appearance)
3. JS → interactivity (enhances behavior)
A concrete example: a form
<!-- 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);
});
If JavaScript fails to load (flaky network, error, blocked), the form still works via the native submit — the user can still search. JS only enhances it.
Progressive enhancement vs graceful degradation
- Progressive enhancement — start with the baseline, build up. (Bottom-up.)
- Graceful degradation — start with the full-featured version, ensure it degrades acceptably. (Top-down.)
Progressive enhancement is generally more robust because the foundation is guaranteed to work.
Why it matters
It produces resilient, accessible, performant sites: content is in the HTML (good for SEO, screen readers, and slow/old devices), the page is usable before/without JS (faster perceived load, works if a script errors), and enhancements are a bonus rather than a requirement.
In a world of varied devices, networks, and failures, building on a working HTML core — rather than assuming JS always runs — keeps a site usable for everyone.
Modern frameworks echo this with server-side rendering and "the platform works first, hydration enhances."