« Previous
Next »
Browser Support
Browsers ship JavaScript features on different timelines. Knowing what's "safe" to use prevents tickets in production.
Where to check
| Resource | What it tells you |
|---|---|
| caniuse.com | Per-feature support across Chrome, Firefox, Safari, Edge, plus mobile, with usage percentages. |
| MDN compatibility tables | On every JS API page — desktop + mobile breakdown. |
| web.dev / Baseline | "Widely available" badge once a feature ships in every major engine for 30 months. |
| kangax.github.io/compat-table | Detailed ECMAScript feature support per engine version. |
Polyfills vs. transpilation
| Feature kind | Solution |
|---|---|
New method (Array.prototype.toSorted) | Polyfill (small script that adds it to older runtimes). |
| New syntax (arrow fn, optional chaining) | Transpiler — Babel, swc, esbuild rewrite to older syntax. |
New API (structuredClone, AbortController) | Polyfill or feature-detect with fallback. |
What's safe to ship in 2026
- All of ES2020 — optional chaining, nullish coalescing, dynamic
import, BigInt. - ES2022 — class fields, private (#), top-level
await,Object.hasOwn,at(). - ES2023 — non-mutating array methods (
toSorted,toReversed, …),findLast. - Modern Web APIs —
fetch,AbortController,IntersectionObserver,structuredClone,crypto.randomUUID.
Targeting strategy
| Audience | Recommended floor |
|---|---|
| Internal apps / dashboards | Last 2 versions of evergreen browsers — almost no polyfilling needed. |
| Consumer web | Browserslist defaults (~95% of users) — Babel handles the gap. |
| Enterprise / government | Add IE 11 if mandated — significant cost increase. |
Feature detection vs. UA sniffing
JS
// ✓ Feature detection — future-proof
if ("structuredClone" in window) { /* use it */ }
if (typeof IntersectionObserver !== "undefined") { /* observe */ }
// ❌ UA sniffing — breaks when browsers rename themselves
if (/Chrome/.test(navigator.userAgent)) { /* … */ }
Tip: Configure your build with browserslist. The whole toolchain (Babel, autoprefixer, esbuild) reads it — change one line and the polyfills update everywhere.
Example
Example
<!DOCTYPE html>
<html>
<body>
<p id="out"></p>
<script>
document.getElementById("out").textContent = "Hello from Browser Support!";
</script>
</body>
</html>
Try it Yourself »
Exercise
Tool that drives polyfills/prefixes from one config across many tools.
Answer:
Twelve letters.
Test yourself
« Previous
Next »
Discussion
Loading…