Smarter CSS Prefixes with grunt-autoprefixer

Managing CSS vendor prefixes can require a lot of maintenance. There are many good tools that help automate this process, but they require either static prefixes in your source files or mixins.

Autoprefixer takes this concept one step further by allowing you to keep prefixes out of your source CSS (or LESS/SASS/Stylus) entirely. It references your supplied configuration, compares that against the Can I Use API, and outputs only the prefixes you need. The result: clean style files that are always current and trivially easy to maintain.

From a talk given at the December 2013 Seattle JS meetup.

Transcript

1. SMART PREFIXING With grunt-autoprefixer
2. • Prefixes: Chaos • Autoprefixer • Two Examples
3. CSS Vendor Prefixes ✔ Support your users ✔ Test new features ✘ Maintenance issues
4. Managing Chaos • Preprocessors • Mixin Libraries • But ...
5. Prefixes are Configuration NOT CODE
6. • Prefixes: Chaos • Autoprefixer • Two Examples
7. Preprocessor Autoprefixer Minify Source files Concat Grunt
8. Preprocessor Autoprefixer Concat Minify Gruntfile.js caniuse API source files
9. grunt-autoprefixer + Simple configuration + Browser usage stats = Evergreen builds
10. Configure options: { browsers: ['> 1%', '> android 2.2', 'last 2 version'] }
11. • Prefixes: Chaos • Autoprefixer • Two Examples
12. Flexbox Support IE Firefox Chrome Safari Opera iOS Safari Android BB 2.1 -wk 3.2 -wk 2.2 -wk 7 21 -wk 4.0 -wk 2.3 -wk 8 28 -wk 4.2 -wk 3.0 -wk 9 23 29 5.1 -wk 5.0 -wk 4.0 -wk 10 -ms 24 30 6.0 -wk 12.1 6.0 -wk 4.1 -wk 7 -wk 11 25 31 7.0 -wk 17.0 7.0 -wk 4.2-4.3 10 -wk
13. Flexbox Results .item { display: flex; } .item { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; }
14. Border Radius Support IE Firefox Chrome Safari Opera iOS Safari Android BB 2.1 -wk 3.2 -wk 2.2 7 21 4.0 2.3 8 28 4.2 3.0 9 23 29 5.1 5.0 4.0 10 24 30 6.0 12.1 6.0 4.1 7 11 25 31 7.0 17.0 7.0 4.2-4.3 10
15. Border Radius Results a { -webkit-border-radius: 5px; border-radius: 5px; } a { border-radius: 5px; }
16. Easy © Vearl Brown
17. Closing • Autoprefixer vs chaos • Clean source files • Evergreen builds
18. Further Reading bit.ly/IxNQcF @noahec