Browserslist — Share Target Browsers Between Frontend Tools

Introduction

Browserslist provides a standard configuration format for specifying which browsers your frontend project supports. Tools like Autoprefixer, Babel, PostCSS, ESLint, and Vite read this config to determine what CSS prefixes to add, which JavaScript syntax to transpile, and which polyfills to include.

What Browserslist Does

• Defines a single source of truth for browser targets across all build tools
• Resolves human-readable queries like "> 0.5%, not dead" into concrete browser version lists
• Uses regularly updated usage data from Can I Use to evaluate percentage-based queries
• Provides a CLI for testing and visualizing which browsers a query matches
• Integrates automatically with Babel, PostCSS, Autoprefixer, ESLint, and Vite

Architecture Overview

Browserslist parses query strings from package.json, .browserslistrc, or environment variables and resolves them against an embedded copy of Can I Use usage statistics. Each query term (percentage thresholds, version ranges, keyword selectors like "defaults" or "dead") is evaluated and combined using boolean set operations. The result is an array of browser-version pairs that consuming tools use to make compilation or prefixing decisions.

Self-Hosting & Configuration

• Add a browserslist field to package.json or create a .browserslistrc file
• Use environment-specific configs via [production] and [development] sections
• Run npx update-browserslist-db@latest to refresh the Can I Use data
• The BROWSERSLIST environment variable overrides file-based configuration
• Queries support composition with and, or, and not operators

Key Features

• Single config consumed by Babel, Autoprefixer, PostCSS, Vite, and more
• Human-readable query syntax: "> 1%", "last 2 versions", "not dead"
• Regularly updated browser usage data from Can I Use
• Environment-specific targeting for production vs development builds
• Visual query tester available at browsersl.ist

Comparison with Similar Tools

• @babel/preset-env targets — Reads Browserslist config; not a standalone tool
• core-js — Polyfill library that uses Browserslist to determine what to include
• postcss-preset-env — CSS feature targeting that consumes Browserslist queries
• Manual browser lists — Hardcoded version arrays that drift; Browserslist stays current via data updates

FAQ

Q: What does the "defaults" query mean? A: It expands to "> 0.5%, last 2 versions, Firefox ESR, not dead", covering broadly used browsers.

Q: How often should I update the usage data? A: Run npx update-browserslist-db@latest monthly or as part of your dependency update cycle.

Q: Can I target only modern browsers? A: Yes. Use queries like "last 2 Chrome versions, last 2 Firefox versions" or "supports es6-module".

Q: Does it affect bundle size? A: Indirectly. Narrower browser targets mean Babel transpiles less and Autoprefixer adds fewer prefixes, reducing output size.

Sources

• https://github.com/browserslist/browserslist
• https://browsersl.ist