autoprefixer

autoprefixer (GitHub: ai/autoprefixer, License: MIT) parses CSS and adds vendor prefixes to rules based on information from the glorious Can I Use.

1
npm install autoprefixer

The best tool is a tool you can’t see and one that does the work for you. This is the main idea behind autoprefixer. The interface is simple: just forget about vendor prefixes and write normal CSS according to latest W3C specs. You don’t need a special language (like Sass) or special mixins. Of course, you can still use something like SASSStylus or LESS because autoprefixer is a postprocessor for CSS.

Features

  • Because autoprefixer uses actual data from Can I Use, it can also clean up your CSS and remove prefixes that are no longer needed.
  • Flexbox or gradients have different syntaxes in different browsers (sometimes you need to recalculate angles, sometimes you need 2 old properties instead of new one), but autoprefixer hides this from you. Just code by latest W3C specs and Autoprefixer will produce the code for old browsers.
  • You can specify the browsers you want to target
  • Source map support

Usage

There’s an incredible amount of ways you can use autoprefixer:

There are plenty of examples and information on ai/autoprefixer. Check it out!

I’m completely in love with CSS preprocessors, they make life so much easier. I still go between LESS and Stylus, but more often lean towards LESS because it makes using Bootstrap framework so much easier and so much more modular.

Do you use a CSS preprocessor? Which one?

Post navigation

Leave a comment

Leave a Reply

Your email address will not be published.