Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Introduction to PostCSS!
You have completed Introduction to PostCSS!
Preview
Learn how to use Autoprefixer, a popular PostCSS plugin that adds vendor prefixes to your CSS.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Another handy post CSS tool that
optimizes your CSS is auto prefixer.
0:00
A popular plugin that adds
vendor prefixes to CSS rules.
0:05
Normally, you'd NPN install auto
prefixer as a dev dependency.
0:09
Add it to your gulp file and
run it like any other plugin.
0:14
However, if you have the CSS next
plugin pack installed, like we do.
0:17
It already comes with auto prefixer.
0:22
Auto prefixer uses up to date browser
support data from canIuse.com.
0:25
To add only necessary vendor prefixes
to your CSS, so you don't have to.
0:30
For example, developers usually
write vendor prefixes for flexbox.
0:35
So, you can write your flexbox properties
without worrying about browser support.
0:40
Back in my source CSS,
right below the autoprefixer comment.
0:44
I'll create a new rule that
targets the class nav.
0:49
Then, I'll add a display flex declaration.
0:53
Right below that, let's add a flex
direction property and set it to column.
0:57
So, once I save my source CSS and
open up my output CSS.
1:03
Notice, how autoprefixer outputs
vender prefixes only for IE10 and
1:09
legacy webkit browsers,
which use the old flex box syntax.
1:14
Auto prefixer will also remove
outdated vendor prefixes in your CSS.
1:19
Border-radius properties, for example,
no longer need vendor prefixes.
1:24
So, if you currently have or
write any vendor prefixes for
1:29
border-radius in your CSS.
1:33
For example, let's say
Webkit-border-radius of ten pixels and
1:35
right below that,
let's add the un-prefix declaration.
1:41
Auto prefixer removes the webkit
prefix from the output CSS.
1:52
And like most plug ins, you can pass
config options to auto prefixer.
2:00
These options let you specify the browser
versions you want to support.
2:05
Since auto-prefixer is installed
via the CSS next plugin.
2:09
I'll pass the browser's
option to CSS next.
2:14
You specify the browsers you
want to support in your project,
2:21
using predefined queries.
2:25
The queries can be a string or an array.
2:27
For example, the string last 2 versions,
instructs autoprefixor or
2:30
to ignore all but the last two
versions of each major browser.
2:37
So, I'll save my gulpfile.
2:41
And back in my terminal,
I'll press Ctrl+C to stop the watcher.
2:45
Then run gulp again,
to apply the latest changes.
2:50
I'll save my source CSS and
open up my output CSS.
2:54
And we can see that the old
flex box syntax for
2:59
WebKit is no longer in the output CSS.
3:02
And you're able to use more
than one query within an array.
3:08
So for instance, to support the last
two versions of each browser
3:13
and versions of Firefox
less than version 27.
3:19
Add the string Firefox,
less than 27 to the array.
3:23
I'll save my Gulp file,
bring up the terminal.
3:31
Type Control C, then run Gulp again.
3:34
Then, I'll save my source CSS and
3:39
in the CSS output,
you'll see the MAS vendor prefixes.
3:42
And the old flex box syntax for
legacy Firefox.
3:47
So as you can see,
adult prefixer is a really smart plugin
3:54
that lets you forget
about vendor prefixes.
3:58
So, you can focus on writing awesome CSS.
4:00
Be sure to check out the links to
the docs I posted in the teacher's notes.
4:03
to see all the query options
you can use with Autoprefixer.
4:07
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up