{"id":145960,"date":"2013-08-07T06:24:03","date_gmt":"2013-08-07T13:24:03","guid":{"rendered":"http:\/\/css-tricks.com\/?p=145960"},"modified":"2017-04-13T16:39:03","modified_gmt":"2017-04-13T23:39:03","slug":"autoprefixer","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/autoprefixer\/","title":{"rendered":"Autoprefixer: A Postprocessor for Dealing with Vendor Prefixes in the Best Possible Way"},"content":{"rendered":"

The following is a guest post by Andrey Sitnik<\/a>, the creator of the Autoprefixer<\/a> tool, a “postprocessor” for handling vendor prefixes in CSS. Why use this instead of your preprocessor or another tool? Many reasons. Andrey will explain.<\/em><\/p>\n

<\/p>\n

Autoprefixer<\/a> parses CSS files and adds vendor prefixes to CSS rules using the Can I Use<\/a> database to determine which prefixes are needed.<\/p>\n

All you have to do is add it to your asset building tool (Grunt<\/a>, for instance) and you can totally forget about CSS vendor prefixes. Just write regular CSS according to the latest W3C specifications without any prefixes. Like this:<\/p>\n

a {\r\n  transition: transform 1s\r\n}<\/code><\/pre>\n
Autoprefixer uses a database with current browser popularity and properties support to apply prefixes for you:<\/p>\n
a {\r\n  -webkit-transition: -webkit-transform 1s;\r\n  transition: -ms-transform 1s;\r\n  transition: transform 1s\r\n}<\/code><\/pre>\n
\n  
Autoprefixer logo by Anton Lovchikov<\/a><\/figcaption><\/figure>\n
The Problem<\/h3>\n
We can, of course, write vendor CSS prefixes by hand, but it can be tedious and error-prone.<\/p>\n
We can use services like Prefixr<\/a> and text editor plugins, but it is still exhausting to work with big blocks of repeating code.<\/p>\n
We can use mixin libraries with preproccesors like Compass<\/a> for Sass or nib<\/a> for Stylus. They solve a lot of problems, but create other problems instead. They force us to use a new syntax. They iterate much slower than modern browsers do, so a stable release can have a lot of unnecessary prefixes, and sometimes we need to create our own mixins.<\/p>\n
And Compass does not really hide prefixes from you since you still need to decide on a lot of questions, for example: Do I need to write a mixin for border-radius<\/code>? Do I need to split arguments for +transition<\/code> by comma?<\/p>\n
Lea Verou\u2019s -prefix-free<\/a> came closest to solving this problem, but using client side libraries is not such a good idea when you take end-user perfomance into account. To avoid doing the same job again and again, it is better to build CSS once: during asset building or project deployment.<\/p>\n
Under the Hood<\/h3>\n
Instead of being a preprocessor \u2013 such as Sass and Stylus \u2013 Autoprefixer is a postprocessor. It doesn\u2019t use any specific syntax and works with common CSS. Autoprefixer can be easily integrated with Sass and Stylus, since it runs after CSS is already compiled.<\/p>\n
Autoprefixer is based on Rework<\/a>, a framework for writing your own CSS postproccesors. Rework parses CSS to useful JavaScript structure and exports it back to CSS after your manipulations.<\/p>\n
Each version of Autoprefixer contains a copy of latest Can I Use data:<\/p>\n