indieweb:graceful_degradation
Table of Contents
Progressive Enhancement vs. Graceful Degradation
Two strategies for handling missing capabilities — they're often confused but work in opposite directions.
Progressive Enhancement
Start from the baseline. Build up.
- Write semantic HTML that works everywhere
- Add CSS for visual enhancement
- Add JavaScript for interactive enhancement
- Each layer is optional — the baseline always works
Graceful Degradation
Start from the full experience. Remove what fails.
- Build the full feature-rich experience first
- Add fallbacks for when things break
- The baseline may still be compromised
Why Progressive Enhancement Wins
Graceful degradation assumes you can anticipate every failure mode. Progressive enhancement assumes you can't — so it makes the baseline solid first.
Progressive enhancement is always kinder than graceful degradation.
In Practice
| Approach | HTML | CSS | JS |
|---|---|---|---|
| Progressive Enhancement | Semantic, works alone | Enhances layout | Adds interactivity |
| Graceful Degradation | Built for JS | May depend on JS | Core, with fallbacks |
The .no-js pattern is a practical implementation of progressive enhancement.
Resources
See Also
indieweb/graceful_degradation.txt · Last modified: by 127.0.0.1
