Skip to main content Accessibility Feedback

Better autoprefixing

I love using autoprefixer to automatically add vendor prefixes to CSS rules based on Can I Use data.

It lets me write vanilla, unprefixed CSS and offload that stuff to a system that will do it better than I can (this is what I meant yesterday when I wrote about technology accelerating what humans do).

How autoprefixer works

For example, you can write this.

::placeholder {
	color: gray;
}

And, depending on how you have it configured, it could output something like this for you.

::-webkit-input-placeholder {
	color: gray;
}

:-ms-input-placeholder {
	color: gray;
}

::-ms-input-placeholder {
	color: gray;
}

::placeholder {
	color: gray;
}

It can also remove old, unused prefixes from your code for you. For example, this…

a {
    -webkit-border-radius: 5px;
            border-radius: 5px;
}

Becomes this…

a {
    border-radius: 5px;
}

The problem with how it’s often configured

I often see autoprefixer configured like this.

browsers: ['last 2 version']

This is how I always saw it used, so it’s how I configured mine a few years ago, too.

Jamie Kyle pointed out a pretty big issue with this approach, though.

When you say “We support the last 2 versions of every browser”, you probably don’t mean browsers like:

  • Internet Explorer Mobile (0.23% market share globally)
  • Blackberry Browser (0.07%)
  • Opera Mobile (0.01%)
  • QQ Browser (0%)
  • Baidu Browser (0%)

But guess what? “last 2 versions” will always match those… forever.

Whoa. Good catch, Kyle! His recommendation instead?

"browsers": [
	">0.25%",
	"not ie 11",
	"not op_mini all"
]

I’m not sure I’d drop optimization for Opera Mini, but I like this approach!