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.

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