Browser Compatibility & Baseline Cheat Sheet
Web platform Baseline status, feature detection, caniuse workflows, and cross-browser testing strategies.
Modern Frontend
browser
compatibility
baseline
Browser compatibility means a feature works across the browsers your users actually run. Baseline groups features by when they became widely available, so you can decide whether to ship or polyfill.
Baseline status
Table
| Status | Meaning |
|---|---|
| Newly available | Supported in the latest stable of all core browsers. |
| Widely available | Supported for 30 months across core browsers. |
| Limited availability | Not yet in every core browser. |
Feature detection
Prefer runtime detection over user-agent sniffing.
js
if ("structuredClone" in window) {
// native support
} else {
// fallback / polyfill
}
if (CSS.supports("display", "grid")) {
// grid available
}
caniuse workflow
- Search the feature on caniuse.com.
- Check the target browser matrix and usage percentage.
- Decide: ship, polyfill, or progressive enhancement.
- Add a fallback for unsupported browsers.
Progressive enhancement
Table
| Layer | Approach |
|---|---|
| HTML | Content works without JS. |
| CSS | Enhance with @supports guards. |
| JS | Add interactivity only when supported. |
css
@supports (display: grid) {
.layout { display: grid; }
}
Testing matrix
Table
| Tool | Purpose |
|---|---|
| BrowserStack / Sauce Labs | Real device/browser testing. |
| Playwright / Puppeteer | Automated cross-browser E2E. |
| caniuse | Feature support lookup. |
| Browserslist | Define target browsers in build config. |