Use Autoprefixer to add vendor prefixes to your CSS


The latest CSS properties are getting implemented in browsers before they become standardised. Which is great for us developers in that we can start using the latest CSS3 features quicker than not. But to use these latest implementations, we need to add vendor prefixes to our CSS rules, specific to those browser vendors (e.g. for Chrome and Firefox).

For example, to make sure the animation property works across all browsers, we would need to write out something like…

[fusion_builder_container hundred_percent=”yes” overflow=”visible”][fusion_builder_row][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][css title=”Animating an h2 tag”]
h2 {
-webkit-animation: example 5s linear 2s infinite alternate;
animation: example 5s linear 2s infinite alternate;
}
[/css]

This can be tedious to work out which CSS properties need to be vendor prefixed, and then to actually duplicate each of those properties with a vendor prefix.

My first stab at solving this was to write my own Sass mixins that I could use to preprocess my CSS.

Then I discovered Bourbon which is a library of mixins that includes mixins to add vendor prefixes for specific CSS properties. I prefer to go with well maintained and well supported libraries than essentially re-writing that code, so I opted to use them.

And then I read Bourbon is deprecating their support in generating the vendor prefixes. And that’s when I discovered Autoprefixer.

Autoprefixer is a postprocessor.

For the above two previous methods (using Sass or Bourbon) we need to know which CSS properties need to have vendor prefixes added to them. In the case of Autoprefixer, all I now need to do now, is just write my CSS, then pipe that CSS through Autoprefixer using a build tool like Gulp. Autoprefixer will then automagically add the vendor prefixes onto the CSS properties that need them.

A snippet of one of my gulpfile.json files using autoprefixer looks like this

https://gist.github.com/magician11/41994fdac333d02131a9

So much simpler! And we’re done.[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]


Leave a Reply

Your email address will not be published.