browserslist VS caniuse

This plugin automatically converts modern JavaScript and adds necessary polyfills based on Browserlist-targets using Babel.

For a production build, you are likely using Browserslist, by default Vite targets browsers that support native ES Modules, native ESM dynamic import, and import.meta.

Not these days, where most people are using evergreen browsers and iOS users upgrade very quickly.

Take a look at the defaults for browserslist, for example:

https://browsersl.ist/#q=defaults

It just barely supports Safari 15, on iOS only, and that’s likely to go away imminently because it’s under 1% usage.

browserslist

We compile JS only for modern browsers. The list of default browsers in Next can be overridden in your browserslist.

In the latest versions of Next.js, targeting specific browsers or features is a breeze using the Browserslist configuration in your package.json file. The latest version of Next.js (v13) uses the following configuration by default:

For a more general answer to browser support, check out https://github.com/browserslist/browserslist. That seems to be standard tool to help you with that.

As someone else pointed out, you're overestimating Chrome/ium's market share.

Regardless, after the web.dev/baseline announcement, I looked at Browslerlist and one of our site's analytics and it is shocking how many people are not using the last two versions of evergreen browsers. There is a long tail of browser versions in those stats.

https://browsersl.ist

The way folks handle this in production is with browserslist, which lets you query on different things you want to support: https://github.com/browserslist/browserslist. This in turn tells other parts of your tooling what language features to transpile for production.

I imagine tools could be built on top of that which do what you’re asking too

Browser compatibility can be checked using tools like CanIUse (https://caniuse.com/).

Browser compatibility is a major concern. CanIUse (https://caniuse.com/) provides detailed compatibility data for ES2015 features. Older browsers (e.g., Internet Explorer) require polyfills. core-js is a comprehensive polyfill library. Babel can automatically include polyfills based on the configured targets and useBuiltIns.

Going purely by (mis)feature count, I'd say they're pretty similar:

https://caniuse.com/?compare=chrome+136,safari+18.5,firefox+...

Automated browser compatibility: PostCSS Autoprefixer scans CSS and applies vendor prefixes based on up-to-date browser data from Can I Use. This means developers don’t need to manually add prefixes or worry about outdated ones cluttering their stylesheets

According to https://caniuse.com/?search=webgpu I should be able to use Edge and Opera, but neither works; I'm on Linux Mint, if that makes a difference

17. Can I Use

🔗 https://caniuse.com/