How to Add CSS Vendor Prefixes Automatically

Autoprefixer makes the life of frontend developers much easier

Photo by Mika Baumeister on Unsplash

Something that I hated to do when I used to write CSS code was adding CSS vendors prefix. Come on guys everyone gets bored to write the same CSS rules for different browsers.

So let’s start from the begging!

If you are interested in setting up a CSS build process with Gulp I suggest you to read this article.

What are the CSS vendor prefixes

CSS vendor prefixes allow the makers of web browsers to add support for the latest CSS features, for experimentation or a testing period.

So they allow you to run all your CSS rules across all browsers.

Common Prefixes

The CSS browser prefixes that you can use are:

• -webkit- supported by OPERA, SAFARI, GOOGLE CHROME
• -moz- supported by FIREFOX
• -ms- supported by EDGE/INTERNET EXPLORER

Autoprefixer

The autoprefixer is a PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use.