• Like
Smarter CSS Prefixes with grunt-autoprefixer
Upcoming SlideShare
Loading in...5
×

Smarter CSS Prefixes with grunt-autoprefixer

  • 1,208 views
Uploaded 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 …

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,208
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

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. Source files Concat Preprocessor Autoprefixer Minify Grunt
  • 8. Concat Preprocessor caniuse API Gruntfile.js Autoprefixer Minify source files
  • 9. grunt-autoprefixer + Simple configuration + Browser usage stats = Evergreen builds
  • 10. ● Prefixes: Chaos ● Autoprefixer ● Two Examples
  • 11. Configuration options: { browsers: [ 'last 2 version', 'android 2.3', '> 1%' ] }
  • 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. Flexbox Results .item { display: flex; } .item { display: display: display: display: display: } -webkit-box; -webkit-flex; -moz-box; -ms-flexbox; 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 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. 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