Graceful Degradation
Definition
It starts from the opposite end to progressive enhancement. You build the full thing first, then decide what should happen wherever a piece of it is missing — a grid that falls back to a single column, a video that falls back to a poster image and a download link, a custom date picker that falls back to a plain text field. The point is a worse state you chose, rather than one that happened to you. Browsers help by design: an unrecognised CSS declaration is discarded and the previous one still stands, so ordering plain before modern buys the fallback for nothing. Where the difference is structural rather than cosmetic, @supports lets you write both cases out explicitly.
Why It Matters
The difference between degrading and breaking is the difference between a plainer page and a lost visitor. A card layout that loses its grid becomes a stack of cards, which is fine; the same layout built on absolute positioning loses everything and piles the text on itself. On a page whose whole purpose is one action — read the menu, follow the download link, find the address — a degraded version that still allows that action costs you nothing you can measure. The work is deciding in advance which parts are decoration and which part is the job.
How It Works
Three mechanisms cover most of it. In CSS, declaration order does the work — display: block followed by display: grid leaves the earlier value standing wherever the later one is not understood — and @supports wraps anything needing a whole block of its own. In HTML several elements have a fallback built in: the content between video tags appears when the element is unsupported, an img inside a picture element is the default when no source matches, and alt text stands in for an image that will not load. In JavaScript, a try block around an optional feature stops one failure dragging the rest of the script down with it. What you cannot do is degrade something never expressed in markup: a canvas drawn entirely by script has nothing underneath it to fall back to.
Real-World Example
A photo gallery at harbour-shots.99helpers.site serves AVIF images inside picture elements with JPEG sources listed after them. A visitor on an old browser notices nothing whatever — the browser picks the format it knows, the pictures appear, and the page weighs a little more for that one person. Had the images been inserted by a script that assumed AVIF support, the same visitor would have been looking at empty boxes.
Common Mistakes
- ✕Leaving the fallback untested — a path nobody has ever loaded is usually broken in some small way nobody has noticed
- ✕Degrading into an error message — telling somebody to upgrade their browser is not a fallback, it is a refusal
- ✕Using a modern value as the only value — with no earlier declaration behind it the property is dropped and the layout collapses
Related Terms
Progressive Enhancement
Progressive enhancement means building a page that works with HTML alone, then adding CSS and JavaScript on top. Each layer improves it; none of them is needed for the content to be readable.
Browser Compatibility
Browser compatibility is whether a page behaves the same in every browser and version your visitors actually use. Most modern features work everywhere; the trouble comes from the few that do not, and from old versions.
Polyfill
A polyfill is a piece of JavaScript that implements a feature a browser is missing, so code written for the modern feature runs there anyway. It fills the gap rather than routing around it.
Alt Text
Alt text is the alt attribute on an HTML image: a short written replacement for the picture, read aloud by a screen reader and shown when the image fails to load. A decorative image takes an empty alt, not a missing one.
AVIF File
AVIF is an image format built from the still-frame coding of the AV1 video codec. It generally beats WebP by another 20 percent or so at matching quality, at the cost of much slower encoding.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →