One config to rule them all
Andrey Sitnik, Evil Martians

Browserslist
The company behind PostCSS and Autoprefixer



Check out my Twitter for the slides

Part 1. The problem.

Two most common Autoprefixer mistakes
.postcssrc
{
"plugins": {
"autoprefixer": {
"browsers": [
"last 2 Chrome versions",
"last 2 Firefox versions",
"last 2 Edge versions",
"last 2 Safari versions"
]
}
}
}

Adds prefixes needed for specified browsers
/*
"last 2 Chrome versions"
*/
.text {
-webkit-user-select: none;
user-select: none;
}
/*
"last 2 Chrome versions"
"last 2 Edge versions"
*/
.text {
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
babel-preset-env is “Autoprefixer” for JS
.babelrc
{
"presets": [
["@babel/preset-env", {
"targets": {
"browsers": [
"last 2 Chrome versions",
…
]
}
}]
]
}
Adds polyfills needed for specified browsers
/*
"last 2 Chrome versions"
*/
const array = [1, 2, 3];
const [first, second] = array;
/*
"last 2 Chrome versions"
"last 2 Edge versions"
*/
const array = [1, 2, 3];
const first = array[0],
second = array[1];
Two configs with the same list
"autoprefixer": {
"browsers": [
"last 2 Chrome versions",
"last 2 Firefox versions",
"last 2 Edge versions",
"last 2 Safari versions"
]
}
["@babel/preset-env", {
"targets": {
"browsers": [
"last 2 Chrome versions",
"last 2 Firefox versions",
"last 2 Edge versions",
"last 2 Safari versions"
]
}
}]

More tools, more configs with browsers
"autoprefixer": {
"browsers": [
"last 2 Chrome versions",
"last 2 Firefox versions",
"last 2 Edge versions",
"last 2 Safari versions"
]
}
["@babel/preset-env", {
"targets": {
"browsers": [
"last 2 Chrome versions",
"last 2 Firefox versions",
"last 2 Edge versions",
"last 2 Safari versions"
]
}
}]
"postcss-preset-env": {
"browsers": [
"last 2 Chrome versions",
"last 2 Firefox versions",
"last 2 Edge versions",
"last 2 Safari versions"
]
}
"plugin/no-unsupported-browser-features": [true, {
"browsers": [
"last 2 Chrome versions",
"last 2 Firefox versions",
"last 2 Edge versions",
"last 2 Safari versions"
]
}]

Part 2. The solution.

A single config for all tools
7
.browserslistrc
last 2 versions
> 1% in US
not dead # IE 10, BlackBerry, and Opera Mobile 12.1
* Only Babel 7 supports config file
Or package.json
{
…
"browserslist": [
"last 2 versions",
">1% in US",
"not dead"
]
}
* Only Babel 7 supports config file
Queries instead of exact versions
> 0.5%, > 0.5% in US, > 0.5% in alt-NA, > 0.5% in my stats
last 2 versions, last 2 Chrome versions
last 2 years, since 2016
Firefox ESR, Electron 1.4.5
not dead
extends @my-company/browserslist-config

Feature 1: Single config for all tools


Feature 2: A single development convention
— Do we still support IE 11?
— Check Browserslist config

Feature 3: Tools will think about browsers
- Autoprefixer
- babel-preset-env
- postcss-cssnext
- postcss-preset-env
- eslint-plugin-compat
- stylelint-no-unsupported-browser-features
- postcss-normalize
Part 3. Who uses Browserslist?

The only recommended way for Autoprefixer


The only recommended way for Babel




@custom-media --mobile (width <= 800px);
@media (--mobile) {
body {
font-family: system-ui;
}
}
@media (max-width: 800px) {
body {
font-family: system-ui,
-apple-system,
BlinkMacSystemFont, …
}
}
/* last 3 versions */
audio, video {
display: inline-block;
}
img {
border-style: none;
}
/* last 2 versions */
img {
border-style: none;
}
Part 4. The ecosystem.

const { matchesUA } = require('browserslist-useragent')
if (!matchesUA(request.headers['user-agent'])) {
response.end(
updateBrowserWarning + html
)
} else {
response.end(html)
}
> 0.5% in my stats
browserslist-stats.json

npx browserslist-ga

Part 4. The community.

Create React App


CSS Tricks
by Chris Coyier on CSS Tricks


Official public Browserslist configs
extends @ebay/browserslist-config
extends @wordpress/browserslist-config

Part 4. Best practices.

1. Do not specify browsers by name
last 2 Chrome versions
last 2 Firefox versions
last 2 Edge versions
last 2 Safari versions
last 2 versions


But it is OK for kiosks and Electron apps
last 1 Electron version

2. Don’t remove mobile browsers
defaults
not last 1 Android versions
not last 1 Samsung version
not last 1 iOS version
defaults



Mobile users visit desktop-only websites too
3. Don’t exclude browsers you don’t know
defaults
not Opera Mini all
not last 1 UCAndroid version
not last 1 QQAndroid version
not last 1 Baidu version
defaults


100M Opera Mini users in Africa
Opera Mini 2.66% > 1.86% Microfsoft Edge
* According Can I Use


Chinese browsers
UC Browser 7.51% > 3.85% Firefox + 2.71% Safari

* According Can I Use

The best queries
last 1 version
> 0.5% # or > 1% in my stats
not dead
defaults
# last 2 versions
# > 0.5%
# Firefox ESR
# not dead
Minimum
Perfect

4. Built-in CLI to check the result
npx browserslist
and_chr 64
and_ff 57
and_qq 1.2
and_uc 11.8
android 62
baidu 7.12
chrome 65
…
Coverage
npx browserslist --coverage
These browsers account
for 57% of all users
globally
Fixing 2 most common Autoprefixer mistakes
{
"plugins": {
"autoprefixer": {
"browsers": [
"last 2 Chrome versions",
"last 2 Firefox versions",
"last 2 Edge versions",
"last 2 Safari versions"
]
}
}
}
{
"plugins": {
"autoprefixer": { }
}
}
last 1 version
> 0.5% # or > 1% in my stats
not dead

5*. Do not support only popular browsers
> 1%
> 1%
last 1 version
not dead
Internet Explorer


Developers


The circle
Developers make sites for popular browsers
Users use browsers supported by wesbites

Now days



Tweets about new awesome tools

Hedgehogs for every release








Subscribe
@browserslist
@evilmartians
@sitnikcode

Browserslist
By Andrey Sitnik
Browserslist
Browserslist is a config to share target browsers between different front-end tools
- 7,450