Do you really know browserslist? Fully understood

Everyone must be familiar with Browserslist, and it will be present in existing front-end projects. Browserslist helps us maintain the right balance between browser compatibility and bundle size. With Browserslist, it is possible to reach a wider audience (browsers) while keeping the package size to a minimum.

• Do you always keep the default value in your project and never rewrite it?
• Did you know that with just a few parameters, you can change which browsers (audiences) your project supports?
• Do you know where browsers are currently the mainstream? Which ones are deprecated (or have low adoption)?

Through the following content, we will answer them one by one.

Configuration method:

There are two common ways to use Browserslist in a project: ① Add in the package.jsoncorresponding field; ② Independent browserslistrcfile

1. package.jsondeclared in

   "browserslist": [
     "> 1%",
     "last 2 versions",
   	"not ie <= 8"
   ]
   

2. by browserslistrcconfiguration

   # Browsers that we support
   > 1%
   last 2 versions
   not ie <= 8
   

There is no difference between the two methods, and everyone can manage according to their own habits or their own team norms. (We use a separate file method)

Audience Browser Selection:

If the project audience you are responsible for is fixed, or if you can freely decide which browsers to support, then you are very lucky. You can skip this section and configure it directly according to the specific browser.

But it is often difficult for us to decide which browsers should be supported? Only latest Chrome version? Or should all be compatible including IE11?

caniuse-liteAnd Can I Use can provide corresponding data support, and Browserslist is also based on this data.

Specific browsers and versions that take more than 0.3% of the market and are continuously maintained.

We can find that >0.3%, and not deadthe browsers account for 89.5% of the total.
Of course, you can also choose according to the region, such as the usage rate in China is greater than 0.3%.

Due to the relatively high penetration rate of mobile terminals in China, the overall coverage rate is only 79.5%, and there are many browser versions for Android in the rest.

How to configure?

Through the above method, we can delineate which browsers and versions we also support, and the next step is how to configure through browserslist?

You can check it through https://browsersl.ist/ , the browsers supported by the content you configured

1. Versions with an audience above or below a certain size can be selected globally, in a region, or in a country
   • > 5%Worldwide usage rate is greater than 5%
   • >= 5% in USU.S. usage rate is greater than or equal to 5%
2. Choose a recent browser version
   • last 2 versionsThe latest 2 versions for all browsers
   • last 2 Chrome versionsThe latest 2 versions of chrome browser
3. specific browser version
   • Chrome > 100Chrome browser version greater than 100
   • not Firefox ESRExclude Firefox ESR
4. Select browser versions that support specific features
   • supports es6-moduleBrowsers that support es6-module
   • supports css-gridBrowsers that support css-grid
5. The above conditions can be combined
   • > 0.5%, last 2 versionsThe usage rate is greater than 0.5% or the latest 2 versions of all browsers (equivalent to > 0.5% or last 2 versions)
   • > 0.5% and last 2 versionsThe latest 2 versions of browsers with a usage rate greater than 0.5%
6. defaultsEquivalent to> 0.5%, last 2 versions, Firefox ESR, not dead

After understanding the above configuration syntax, after the configuration is complete, you can view it in real time at https://browsersl.ist/ mentioned above. In addition, you can also use the following tools to check whether the configuration is correct and the specific browser version supported.

How to check if the configuration is correct?

$ npx browserslist-lint

missedNotDead  The not dead query skipped when using last N versions query
✖ 1 problems

Need to append not dead, but use with caution, it will filter to browsers that are no longer supported, such as IE11

How to view the configuration content and which browsers are supported?

$ npx browserslist

and_chr 95
chrome 95
chrome 94
safari 15
safari 14.1
samsung 15.0
...

At this point, you can control the supported browsers with a few simple lines of commands, and leave the rest to browserslist.