Progressive Enhancement

Updated September 30, 20262 min read

In short

Progressive enhancement is a web design strategy that starts with a basic page that works for everyone, then adds richer features where browsers support them.

What is progressive enhancement?

Progressive enhancement builds a website in layers. The foundation is meaningful HTML content, with standard links and forms that work in any browser, even without CSS or JavaScript. On top of that, CSS adds layout and visual design, and JavaScript adds interactivity, each layer improving the experience where it is supported without being required for the core task.

A search form, for example, is first built as a normal HTML <form> that submits to the server and gets back a results page. JavaScript then intercepts the submission to show results instantly without a reload, but if the script fails to load, times out on a slow network, or is blocked, the form still works. In CSS, the @supports rule applies newer styles only in browsers that understand them. Modern frameworks support the same pattern with server-rendered HTML and forms that work before hydration finishes.

Progressive enhancement is like building a house with a solid staircase and then adding an elevator: everyone can reach the upper floor, and those who can use the elevator get there more comfortably. The approach improves accessibility, resilience on poor connections, and SEO, because the essential content is in the HTML from the start.

Progressive enhancement is often confused with graceful degradation. Graceful degradation starts with the full experience for modern browsers and then adds fallbacks so it doesn't break completely in older ones, while progressive enhancement starts from a basic working version and builds up. The results can look similar, but progressive enhancement guarantees the core works first. It is also not the same as a progressive web app (PWA), an installable web app with offline support, although good PWAs often follow progressive enhancement principles.

Key takeaways

Start with content and functionality that work in plain HTML.
Add CSS for presentation and JavaScript for richer interaction as optional layers.
Core tasks keep working when scripts fail, load slowly, or are blocked.
@supports and feature detection apply enhancements only where they are supported.
Graceful degradation works in the opposite direction, from full features down to fallbacks.

Example

A search form that works with or without JavaScripthtml

<!-- Works everywhere: a plain form that the server handles -->
<form action="/search" method="get" id="search">
  <input type="search" name="q" aria-label="Search terms">
  <button type="submit">Search</button>
</form>
<div id="results"></div>
<script type="module">
  // Enhancement: if this script runs, show results without a page reload
  document.querySelector("#search").addEventListener("submit", async (event) => {
    event.preventDefault();
    const q = new FormData(event.target).get("q");
    const res = await fetch("/search?q=" + encodeURIComponent(q));
    document.querySelector("#results").innerHTML = await res.text();
  });
</script>

Readers ask

What is the difference between progressive enhancement and graceful degradation?

Progressive enhancement starts with a basic version that works everywhere and adds features on top. Graceful degradation starts with the full-featured version and adds fallbacks so it still works, in a reduced form, in less capable browsers.

Does progressive enhancement mean building sites without JavaScript?

No. It means the core content and tasks don't depend on JavaScript. A progressively enhanced site can still use plenty of JavaScript to make the experience faster and richer.

Is progressive enhancement still relevant today?

Yes. Scripts fail more often than many developers expect, because of flaky mobile networks, browser extensions, and errors, and server rendering in modern frameworks has made the approach easier to follow.