Browser Support, Polyfills and Transpiling

Not every visitor has the newest browser. How do you use modern JavaScript responsibly?

1. Know your audience

Check your site’s analytics to see which browsers and versions people really use. If nearly everyone is on a recent Chrome, Edge, Safari or Firefox, you can use features that those support. If you serve older devices, you need more care.

2. Check support

• MDN Web Docs: every page has a Browser compatibility table.
• Can I use (caniuse.com): a searchable table of features and the share of users who have them.
• Baseline: a label that tells you when a web feature works in all major current browsers, so it is safe to use.

3. Syntax vs. library features

Two different problems:

You can add a missing method with a polyfill. You cannot polyfill new syntax. That needs a transpiler.

Polyfills

A polyfill is code that adds a missing built-in feature, written with older features.

1
2
3
4
5

if (!Array.prototype.at) {
  Array.prototype.at = function (index) {
    return index >= 0 ? this[index] : this[this.length + index];
  };
}

In practice, use a trusted source (such as core-js) instead of writing them yourself, and only include polyfills your audience needs.

Transpilers

A transpiler (Babel, SWC, esbuild, TypeScript) rewrites newer syntax into older syntax, such as turning a ?? b into equivalent older code. You tell it your target browsers (for example with a browserslist setting), and it produces compatible output.

You do not need a transpiler for a small site that targets current browsers. They matter when you must support older ones.

Feature detection

1
2
3
4
5
6
7

const features = {
  structuredClone: typeof structuredClone === "function",
  toSorted: typeof [].toSorted === "function",
  groupBy: typeof Object.groupBy === "function"
};

console.log(typeof features.structuredClone); // → boolean

Test the thing you want to use (does the function exist?), not the browser name. User-agent sniffing breaks easily.

Progressive enhancement

Build the page so the core content works with plain HTML and CSS, and use JavaScript to add behaviour. If a feature is missing, the page still works, just with a simpler experience. This is often better than trying to support every possible browser.

1

<noscript>This page works best with JavaScript enabled.</noscript>

A practical policy

1. Decide your supported browsers.
2. Use features that those browsers support, checking MDN.
3. For newer methods, add a fallback or polyfill.
4. For newer syntax, use a build tool if you need older browsers.
5. Re-check support every year. The “newest” feature of today is the normal one of next year.