Progressive Enhancement: Core Content and Advanced Features

What is Progressive Enhancement?

Progressive enhancement is an approach in web development that starts with the 'worst case' (lowest capable browser) and improves the experience with supported features.

Core principle: Content and basic functionality should always work. JavaScript, CSS, and advanced HTML features improve the experience but are not required.

Opposite of graceful degradation: Graceful degradation starts with the best experience and degrades in low-capability environments. Progressive enhancement starts with basic experience and improves.

Advantages: Wider user access, better performance, better SEO, better accessibility.

Core Layers

HTML (content): Basic content and structure with semantic HTML. Readable and usable without JavaScript.

CSS (presentation): Basic styles work in all browsers. Advanced CSS features applied conditionally with @supports.

JavaScript (behavior): Basic functionality provided by HTML forms. JavaScript adds enhanced UX (AJAX, animation).

Each layer builds on the previous one. If a lower layer breaks, upper layers also break but basic functionality is preserved.

HTML First Approach

Semantic HTML: Use correct HTML elements. <button>, <a>, <form>, <input>, <nav>, <main>, <article>.

Forms: Create forms that work without JavaScript. Server-side processing with action and method attributes.

Links: Use real <a href="..."> links. Do client-side routing with JavaScript but provide server-side routing as fallback.

NoScript: Show alternative content with <noscript> tag when JavaScript is disabled.

Progressive Web App: Service Worker and manifest are added when basic site works. Basic site works without JavaScript.

CSS Progressive Enhancement

@supports: Conditional styling with CSS feature query. @supports (display: grid) { .container { display: grid; } }.

Fallback: Basic style works in all browsers. Advanced features are applied in supporting browsers.

Example: .button { background: blue; } @supports (backdrop-filter: blur(10px)) { .button { backdrop-filter: blur(10px); background: rgba(0,0,255,0.5); } }.

CSS custom properties: Use fallback values if variables are not supported. color: blue; color: var(--primary, blue);.

JavaScript Progressive Enhancement

Feature detection: Check browser capabilities with Modernizr or native feature detection.

Polyfill: Add missing features (fetch, Promise, IntersectionObserver) with polyfill. Use core-js or polyfill.io.

Graceful degradation: Basic functionality should be preserved if JavaScript errors. Catch errors with try/catch.

Module/nomodule: ES modules for modern browsers, transpiled bundle for older browsers. <script type="module" src="app.mjs"> and <script nomodule src="app.js">.

Lazy loading: Lazy load advanced features (animation, interactive widget). Basic content loads immediately.

Testing and Evaluation

JavaScript disabled test: Disable JavaScript in browser. Does basic functionality work?

Slow connection test: Test with 3G or slow WiFi. Does content load in time?

Old browser test: Test with IE11, old Safari/Chrome. Does basic functionality work?

Lighthouse: Check Accessibility and Best Practices scores. Progressive enhancement improves these scores.