Lesson 27 of 55 · HTML
Progressive Enhancement – Feature Detection
Duration: 8 min
Building for All Browsers
Progressive Enhancement starts with a baseline experience for the least capable browsers, then adds richer features when supported.
Example: Using <picture> for responsive images
<picture>
<source srcset='hero.webp' type='image/webp' />
<source srcset='hero.jpg' type='image/jpeg' />
<img src='hero.jpg' alt='Hero image' loading='lazy' />
</picture>
Older browsers ignore <picture> and fall back to the <img> tag, ensuring the image still appears.
CSS feature detection with @supports
@supports (display: grid) {
.grid { display: grid; }
}
If the browser doesn’t understand Grid, the rule is ignored and the layout gracefully degrades.
Tools
- Modernizr – Detects a wide range of HTML5/CSS3 features and adds classes to
<html>. - Polyfills – Provide fallback implementations for missing APIs (e.g.,
fetch,Promise). <script type='module'>– Native modules load only in browsers that support them; older browsers fall back to a classic script.
Best‑practice workflow
- HTML first – Markup must be functional without any CSS or JS.
- CSS layer – Add layout and styling; use
@supportsfor newer features. - JavaScript enhancement – Add interactivity, checking for feature support before use.
Quick checklist for progressive enhancement
- Content usable without CSS/JS? ✅
- CSS fallbacks (
@supports) in place for newer layout methods? ✅ - Feature‑detection scripts (Modernizr or custom) added? ✅
- Polyfills included only when needed? ✅
- No core functionality hidden behind a single‑browser API? ✅
Tip: Test your page in an older browser (e.g., IE 11) or use Chrome’s Network → Disable JavaScript to see the baseline experience.