Smarter CSS Prefixes with grunt-autoprefixer

2,239 views

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,239
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Smarter CSS Prefixes with grunt-autoprefixer

  1. 1. SMART PREFIXING With grunt-autoprefixer
  2. 2. ● Prefixes: Chaos ● Autoprefixer ● Two Examples
  3. 3. CSS Vendor Prefixes ✔ Support your users ✔ Test new features ✘ Maintenance issues
  4. 4. Managing Chaos ● Preprocessors ● Mixin Libraries ● But ...
  5. 5. Prefixes are Configuration NOT CODE
  6. 6. ● Prefixes: Chaos ● Autoprefixer ● Two Examples
  7. 7. Source files Concat Preprocessor Autoprefixer Minify Grunt
  8. 8. Concat Preprocessor caniuse API Gruntfile.js Autoprefixer Minify source files
  9. 9. grunt-autoprefixer + Simple configuration + Browser usage stats = Evergreen builds
  10. 10. ● Prefixes: Chaos ● Autoprefixer ● Two Examples
  11. 11. Configuration options: { browsers: [ 'last 2 version', 'android 2.3', '> 1%' ] }
  12. 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 5.0 -wk 4.0 -wk 9 23 29 5.1 -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. 13. Flexbox Results .item { display: flex; } .item { display: display: display: display: display: } -webkit-box; -webkit-flex; -moz-box; -ms-flexbox; flex;
  14. 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 5.0 4.0 9 23 29 5.1 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. 15. Border Radius Results a { -webkit-border-radius: 5px; border-radius: 5px; } a { border-radius: 5px; }
  16. 16. Easy © Vearl Brown
  17. 17. Closing ● Autoprefixer vs chaos ● Clean source files ● Evergreen builds
  18. 18. Further Reading bit.ly/IxNQcF @noahec

×