One config to rule them all
Andrey Sitnik, Evil Martians
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/2583932/Iv5oal8.png)
Browserslist
The company behind PostCSS and Autoprefixer
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4862911/bGWCmHJ.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4862912/pKlaeWL.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4868654/sticker.png)
Check out my Twitter for the slides
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4868655/sticker__1_.png)
Part 1. The problem.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4871054/5.jpg)
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"
]
}
}
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4868657/sticker__2_.png)
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"
]
}
}]
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4868665/sticker__6_.png)
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"
]
}]
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4868662/sticker__5_.png)
Part 2. The solution.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4871081/6.jpg)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4868670/sticker__8_.png)
Feature 1: Single config for all tools
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4865623/bart-dry.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4868676/sticker__1_.png)
Feature 2: A single development convention
— Do we still support IE 11?
— Check Browserslist config
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4868677/sticker__2_.png)
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?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4871085/7.jpg)
The only recommended way for Autoprefixer
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4865761/Or0IWOS.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4868686/sticker__4_.png)
The only recommended way for Babel
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4867844/TQJdr8Q.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4868686/sticker__4_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4865775/nNqoKWy.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4865778/68747470733a2f2f692e696d6775722e636f6d2f595672714736502e706e67.png)
@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.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4871045/4.jpg)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4867872/logo_lockup_analytics_icon_vertical_black_2x.png)
npx browserslist-ga
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4868710/sticker__9_.png)
Part 4. The community.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4871041/3.jpg)
Create React App
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4865812/SJZg8pk.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4868714/sticker__11_.png)
CSS Tricks
by Chris Coyier on CSS Tricks
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4865861/IsUISvAq_400x400.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4868654/sticker.png)
Official public Browserslist configs
extends @ebay/browserslist-config
extends @wordpress/browserslist-config
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4872074/sticker__12_tits.png)
Part 4. Best practices.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4871025/1.jpg)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4868718/sticker__13_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4868720/sticker__14_.png)
But it is OK for kiosks and Electron apps
last 1 Electron version
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4868720/sticker__14_.png)
2. Don’t remove mobile browsers
defaults
not last 1 Android versions
not last 1 Samsung version
not last 1 iOS version
defaults
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4868718/sticker__13_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4868720/sticker__14_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4870780/How-to-Request-Desktop-Version-of-Website-in-Chrome-on-Android-Phone.jpg)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4868718/sticker__13_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4868720/sticker__14_.png)
100M Opera Mini users in Africa
Opera Mini 2.66% > 1.86% Microfsoft Edge
* According Can I Use
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4868279/tVA2NoX.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4868725/sticker__16_.png)
Chinese browsers
UC Browser 7.51% > 3.85% Firefox + 2.71% Safari
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4868274/NaOfU4O.png)
* According Can I Use
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4868725/sticker__16_.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4868722/sticker__15_.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4868738/sticker__20_.png)
5*. Do not support only popular browsers
> 1%
> 1%
last 1 version
not dead
Internet Explorer
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4868536/acid3-ie6.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4868743/sticker__22_.png)
Developers
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4868571/best-ie.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4868709/sticker__8_.png)
The circle
Developers make sites for popular browsers
Users use browsers supported by wesbites
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4868745/sticker__23_.png)
Now days
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4868584/wrong_browser.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4868758/sticker__26_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4868655/sticker__1_.png)
Tweets about new awesome tools
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4868602/IGW35ST.png)
Hedgehogs for every release
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4868623/8MIS-7kj3V4.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4868628/NG0rlpJ1y9I.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4868627/KggM-PxodgQ.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4868625/a0Vs_pT_S34.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4868626/HTJyywzKtuA.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4868631/sYwzkS15YpY.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4868624/2PYyt47oCjU.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4868632/uEhKpkUBqs0.jpg)
Subscribe
@browserslist
@evilmartians
@sitnikcode
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4868648/SGqgP1xx_400x400.jpg)
Browserslist
By Andrey Sitnik
Browserslist
Browserslist is a config to share target browsers between different front-end tools
- 7,056