Graceful Degradation
ELI5 — The Vibe Check
Graceful degradation is building the fancy version first, then making sure it doesn't completely break in older or limited environments. It's the opposite of progressive enhancement. You build the full experience with all the bells and whistles, then add fallbacks so older browsers get a 'good enough' version instead of a broken mess. Think of it as 'plan for the best, prepare for the worst.'
Real Talk
Graceful degradation is a design strategy where a system is built to leverage the latest browser capabilities, with fallback behaviors for environments that don't support those features. While functional, degraded experiences may lack visual polish or advanced interactivity. It contrasts with progressive enhancement's bottom-up approach. Common techniques include @supports CSS queries, feature detection (Modernizr), and <noscript> blocks.
When You'll Hear This
"The parallax effect gracefully degrades to a static image on mobile." / "Use @supports for graceful degradation of container queries in older browsers."
Related Terms
Accessibility (a11y)
Accessibility (a11y) is making your website usable by everyone — including people using screen readers, keyboard-only navigation, or who have low vision.
Feature Detection
Feature Detection checks if a browser supports a feature before trying to use it.
Polyfill
A polyfill is a piece of code that teaches old browsers new tricks. Browser doesn't support Promise? Here's a polyfill that fakes it.
Progressive Enhancement
Progressive enhancement means building a web page that works for everyone at its most basic level, then layering on fancy features for browsers that suppor...