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.
