What is progressive enhancement?

Question

IT Interview Practice · Accepted Answer

**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 ```text 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 ```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); }); ``` 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."

The three layers

A concrete example: a form

Progressive enhancement vs graceful degradation

Why it matters

Related questions