HTML Browser Support
Not every browser supports every feature on the day it ships. Knowing where to check support keeps you from writing code that breaks for half your users.
Where to check
| Resource | What it tells you |
|---|---|
| caniuse.com | Per-feature browser support tables with version history and global usage %. |
| MDN Web Docs | Each feature page has a "Browser compatibility" section drawn from the same dataset. |
| web.dev / Baseline | Tells you whether a feature is safely usable across all current major browsers. |
Practical tips
- Use feature detection, not browser detection.
if ('serviceWorker' in navigator)is robust; user-agent sniffing isn't. - Build a baseline that works for older browsers, then layer on enhancements that newer browsers can use.
- For CSS, the
@supports(display: grid)rule lets you write fallback styles for older browsers. - Check your real analytics: if 0.2% of visitors use IE, you probably don't need to ship a polyfill for them.
Tip: If you're starting a new project today, target evergreen browsers (Chrome, Edge, Firefox, Safari) on their last two major releases. That covers 95%+ of users with zero polyfills.
Example
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Browser Support</title>
</head>
<body>
<h1>HTML Browser Support</h1>
<p>This is a demo page for the "HTML Browser Support" lesson.</p>
</body>
</html>
Try it Yourself »
Exercise
Which website tells you whether a given HTML feature is safe to ship?
.com
Seven letters; rhymes with "lighthouse" length-wise.
Discussion
Loading…