Autoprefixer

Autoprefixer logo

Services & Skills

Share on

Autoprefixer is a PostCSS plugin used to parse CSS and add vendor prefixes to your rules by using the values from Can I Use.

Thus, you can write your CSS rules without vendor prefixes:

::placeholder {
  color: gray;
}

.image {
  background-image: url(image@1x.png);
}
@media (min-resolution: 2dppx) {
  .image {
    background-image: url(image@2x.png);
  }
}

Autoprefixer will use data based on current browser popularity and property support to automatically apply prefixes for you:

::-moz-placeholder {
  color: gray;
}
::placeholder {
  color: gray;
}

.image {
  background-image: url(image@1x.png);
}
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 2dppx) {
  .image {
    background-image: url(image@2x.png);
  }
}

You can also try out an interactive demo of Autoprefixer.

Author

Further reading

In the same orbit

Explore more open source projects

Contact us

We’d love to hear from you! We’re not really all that evil, and we love discussing potential projects, intriguing ideas, and new opportunities. Complete the form below or drop us a line at surrender@evilmartians.com.

Martians at a glance
16
years in business

A product development consultancy that works with startups and established businesses, while also creating open source-based products and services