“This is the 21st day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021”

Browserslit queries the list of browsers using specific statements, such as last 2 Chrome Versions.

$ npx browserslist "last 2 Chrome versions"
chrome 94
chrome 93
Copy the code

So what does it do?

To be specific, it is a tool not available for modern front-end engineering. Whether it is dealing with JS Babel, or dealing with CSS postCSS, browserslist is behind them.

  • babelIn the@babel/preset-envThe use ofcore-jsAs a gasket
  • postcssuseautoprefixerAs a gasket

Regarding the relationship between front-end packing volume and gasket, we have the following consensus:

  1. Because of the existence of lower browser versions, shims are essential
  2. The smaller the gasket, the smaller the packing volume
  3. The newer the browser version, the fewer spacers

So in front-end engineering practice, when we confirm the browser version number, then its spacer volume is confirmed.

Suppose the project only needs to support the latest two Google browsers. For browserslist queries, you can write last 2 Chrome versions.

Over time, the query will return the updated browser and the spacer size will decrease.

A shim of promise.any might have been needed a year ago with the above query, but certainly not now.

Finally, how browserslist works: Browserslist queries the browser version database caniuse-Lite against the regular parse query and returns the resulting list of browser versions.

Because Browserslist doesn’t maintain a database, it will constantly remind you to update the caniuse-Lite library.

PS: Caniuse-Lite this library is also maintained by the BrowserSlist team.

The query syntax

By user share:

  • > 5%: The global user share is greater than5%The browser
  • > 5% in CN: User share in China is greater than5%The browser

According to the latest browser version

  • last 2 versions: The latest two versions of all browsers
  • last 2 Chrome versions: Latest two versions of the Chrome browser

The browser is no longer maintained

  • dead: It has been two years since the official maintenance, for exampleIE10

Browser Version

  • Chrome > 90: Chrome is a browser whose version is later than 90

Query syntax and API examples

$ npx browserslist --coverage=CN "1%" >      
These browsers account for 63.15% of all users in the CN
Copy the code

Core principles

$ npx browserslist 'chrome > 90'
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
Copy the code