autoprefixer 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 SASS, Stylus 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:
- as a grunt task using grunt-autoprefixer
- with Compass
- with Stylus
- with Rails
- with Mincer
- with Middleman
- with Node
- with PHP
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?
