The Progressive Enhancement Mindset

Defining Progressive Enhancement

Progressive enhancement is a way of building for the web. You build the parts every user needs first, then add enhancements on top.

Everything starts with HTML that delivers content and core functionality to every user, regardless of their browser or network conditions. CSS goes on top to improve how it looks. Finally, JavaScript adds richer interactive features in browsers that can run it.

It’s also a way of thinking about the web. Browsers and networks vary a lot, so you design for that whole range rather than only the ideal case.

If JavaScript fails to load, the CSS still makes your site presentable. Your users might lose some functionality, but nothing fundamental. If CSS doesn’t load, the HTML still delivers all the content. A failure at one layer never stops the layers below it from working.

This is different from building JavaScript-first applications, where nothing renders unless the scripts run successfully. With progressive enhancement, each user gets the best experience their browser and network can support.

The Case for Progressive Enhancement

The web is unpredictable, and JavaScript fails to run more often than you might realize:

• Networks drop packets
• CDNs experience outages
• Corporate proxies block scripts
• Browser extensions conflict with scripts
• Ad blockers strip out content
• Mobile connections time out

One uncaught error can break everything that runs after it.

Failures like these are a normal part of the web rather than rare exceptions, and progressive enhancement is one way of building for them.

The benefits:

• Improved accessibility with semantic HTML
• Better performance with less code
• Easier maintenance, because the layers are kept separate

It also changes the question you start from. Instead of asking “what features can I build?”, you ask “what’s the core experience?”

When you start with the baseline, you make sure it works well, instead of leaving it as something that only just works.

Graceful Degradation takes a deeper look at how that principle relates to progressive enhancement.

Thinking in Layers, Not Components

Modern frontend development encourages you to think in components. A dropdown menu becomes a React component and a modal becomes a Vue component, and thinking that way can hide the fact that each of them is built from layers.

It helps to think about what each layer provides instead:

Your HTML should make sense by itself. You’d use semantic elements that convey meaning and a proper document structure, without relying on JavaScript to generate it.

Your CSS should enhance without requiring JavaScript. Your layout and styling should work with the HTML as it arrives, without assuming JavaScript will change the DOM before the CSS applies.

Your JavaScript should add behavior that makes sense but isn’t required. You might intercept form submissions for a better user experience, but forms still work normally if JavaScript fails. Navigation can get smooth transitions, while the links keep working as standard links.

The practical guide Building with Progressive Enhancement goes into how to implement this.

The Reliability Spectrum

Each web technology is reliable to a different degree in browsers, and that’s why the layers go in this order.

Feature Detection Over Assumptions

Progressive enhancement relies on detecting what a browser can do rather than assuming it.

When you assume every user has JavaScript enabled, or that every browser supports a particular API, you’re building in something that can break. In practice, some browsers don’t support newer APIs, and scripts don’t always run, either because the user disabled JavaScript or because the network dropped them.

With feature detection, you test whether a browser supports a feature before you use it. You check whether the feature exists, not which browser or version someone uses, so when a browser adds support later, your code starts using the feature without any changes.

You also need a fallback for when a feature is missing, so that instead of breaking, the page does something simpler that still provides the same core functionality.

The Feature Detection pattern covers the implementation details.

In a web application, your critical functionality should work at more than one level. A form should still work through a traditional POST submission if your fetch request fails, and navigation should still work through standard HTML links if your JavaScript router breaks.

Your HTML form works without JavaScript, and your JavaScript intercepts the submission to give users a better experience whenever the script runs.

Your critical paths are the user flows your site can’t do its job without. For an e-commerce site, that’s browsing products, adding to the cart, checking out, and paying. Each of those steps should work at the HTML level first, with enhancements added on top.

The Defense in Depth principle goes into this in more detail, and the Error Boundary Pattern shows it applied.

PE in Practice

Two examples, a form and a navigation menu, show the three layers working together.

Example 1: Form Submission

The form starts as HTML that works without JavaScript, then gains client-side validation and optimistic UI.

Layer 1: HTML Foundation

<form action="/api/contact" method="POST">
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required />
  <button type="submit">Send</button>
</form>

This works everywhere because the browser handles validation and submission natively.

Layer 2: CSS Enhancement

form {
  display: grid;
  gap: 1rem;
  max-width: 400px;
}

input:invalid {
  border-color: red;
}

input:valid {
  border-color: green;
}

button {
  padding: 0.75rem;
  background: blue;
  color: white;
}

The CSS adds visual feedback without breaking the HTML underneath it.

Layer 3: JavaScript Enhancement

const form = document.querySelector('form');
const button = form.querySelector('button');

form.addEventListener('submit', async (e) => {
  e.preventDefault();

  const data = new FormData(e.target);

  // Show loading state
  button.disabled = true;

  const res = await fetch('/api/contact', {
    method: 'POST',
    body: data
  });

  // Handle response
});

This gives your users a better experience, with async submission and instant feedback, and if the script doesn’t load, the HTML form still works.

Example 2: Navigation

The navigation starts as standard links, then gains client-side routing for faster transitions.

Layer 1: HTML Foundation

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>

These standard links work in all browsers and support keyboard navigation out of the box.

Layer 2: CSS Enhancement

nav {
  display: flex;
  gap: 2rem;
}

a {
  padding: 0.5rem 1rem;
  text-decoration: none;
  transition: all 0.2s;
}

a:hover {
  background: blue;
  color: white;
}

a[aria-current="page"] {
  font-weight: bold;
}

This adds visual polish and active state indicators while keeping the links fully functional.

Layer 3: JavaScript Enhancement

// Client-side routing
const nav = document.querySelector('nav');

nav.addEventListener('click', async (e) => {
  const link = e.target.closest('a');
  if (link) {
    e.preventDefault();

    const url = link.href;

    // Fetch & update
    const res = await fetch(url);
    const html = await res.text();

    // Update DOM (updatePage is your own function that swaps in the new content)
    updatePage(html);

    // Update history
    history.pushState({}, '', url);
  }
});

This changes pages without a full reload in browsers that run the script, and standard navigation still works if JavaScript fails.

Modern Frameworks and Progressive Enhancement

You might assume modern JavaScript frameworks like React, Vue, or Svelte are incompatible with progressive enhancement, but you can build progressively enhanced applications with them.

Server-side rendering gives you the first layer of progressive enhancement: your framework renders HTML on the server and sends it to the browser, so the page is visible as soon as it arrives. Then JavaScript loads and “hydrates” the page, adding interactivity. If JavaScript fails, the server-rendered content still displays.

Building with Progressive Enhancement shows how to implement this with modern frameworks.

PE and Application Architecture

Progressive enhancement also changes how you structure your application.

What modern frameworks provide:

• Server-side rendering by default
• Automatic code splitting and lazy loading
• Form actions that work without JavaScript
• Streaming and progressive hydration

The Performance Philosophy

Progressive enhancement also tends to produce faster applications.

When you build from a working baseline and add enhancements on top, you naturally end up deferring code that isn’t critical. Your critical rendering path only includes HTML and critical CSS, and JavaScript isn’t on it, because your basic functionality doesn’t need JavaScript.

The Testing Mindset

Progressive enhancement changes how you test, because you need to check that your site works at more than one level, rather than just in ideal conditions.

There’s more on this in Building with Progressive Enhancement.

Embracing Uncertainty

Progressive enhancement is about accepting that the web is unpredictable. You can’t control your users’ network quality, or whether browser extensions interfere with your code.

You can control how your application responds, though, by building it to adapt to what’s available and fail gracefully when something is missing.

You treat failures as a normal part of running on the web, rather than as edge cases.

The Path Forward

Progressive enhancement makes sites more resilient, so they work for more people in more situations. Accessibility and speed tend to improve along the way.

This approach takes practice, because you have to think in layers rather than components, and think about how things fail before how they succeed.

You end up with an application that works reliably across browsers and network conditions, and adapts to your users instead of expecting them to adapt to it.

Related Content:

• Foundations: Accessibility as a Foundation, Performance as a Foundation, Separation of Concerns
• Principles: Graceful Degradation, Defense in Depth, Baseline-First Thinking
• Guides: Building with Progressive Enhancement
• Patterns: Feature Detection, Form Enhancement Pattern, Navigation Enhancement Pattern, Content Loading Pattern, State Management Pattern

External Resources:

• Understanding Progressive Enhancement - A List Apart’s foundational article
• Progressive Enhancement: What It Is, And How To Use It? - Smashing Magazine guide
• The Power of Progressive Enhancement - Modern take on progressive enhancement
• Resilient Web Design - Book by Jeremy Keith on building for the web
• Gov.UK Design System: Progressive Enhancement - Government Digital Service approach
• MDN: Feature Detection - Detecting browser capabilities