Join Ray Villalobos for an in-depth discussion in this video Automating prefixes with Autoprefixer, part of PostCSS First Look.
- By far the most popular postcss plugin is called autoprefixer. It can add prefixes to your CSS automatically based on information from the Can I Use website. So, let's go ahead and show you how it works. Now, in the old days, I used to take care of issues with browser prefixes by using this site called CSS3 Please. It shows you the different prefixes that you had to add to different CSS3 features in order for them to work in some of the older browsers. Now, the problem is that features are often added to browsers before the specification of the features are complete.
Now to make sure that the official version of a feature won't be broken when it is released, the experimental features are added through browser prefixes. So you can see that certain features like transitions need to be written as multiple rules. Now, the other problem is that certain features aren't supported in older browsers. So you can use a website like Can I Use to see which browsers support which features. If we look, for example, at Flexbox, let's go ahead and type in flexbox right here, you can see that it has support in almost any browser.
But some of these browsers are labeled as not having 100% support. So if we take a look at the explanation, we can see that there are different versions of the flexbox syntax. And some browsers only support the 2012 syntax. And then other browsers support an even different set of parameters. That means that writing rules for Flexbox can be very complicated, but autoprefixer can make it super simple. Just like with cssnano, there are a lot of different ways to install autoprefixer.
The site recommends that we use the npm version. And if we scroll down all the way down here to Usage, you can see that if the only thing you're doing is using autoprefixer by itself without postcss, you can use the standalone gulp-postcss version. However, you can also use postcss in your Node.js application or in Gulp.js by using just a standalone autoprefixer. To install this, let's go back into our project, and first off, I want to make sure that I'm in the correct branch for this video.
So, I'm going to do a git checkout, 02_02b, to check out the proper branch. And you'll see that this branch is slightly different than the one in the previous movie. It doesn't have cssnano installed either as a required statement right here, or in the list of postcss plugins. That's because we don't want the CSS to be compressed, otherwise, it would be very hard to look at. In addition to that, my style.css document has a lot of the prefixes removed.
So, although there are some at the very top, you can see a couple of them right here, I've removed most of the other ones. So for example, you can see in this header section, I'm just using the default flex specification rules right here. Right, so to install the autoprefixer plugin, we're going to need to run an npm install command. Now, on an Mac, you may have to do this under the superuser, so I can use the sudo npm install autoprefixer. And then I want to save this as a developer dependency so that it goes into my package.json file.
Once we have that, we can go into our gulp file and add the required statement. So we'll type in autoprefixer is going to require the autoprefixer module. Make sure you put a comma there at the end. And then, we'll install it inside our postcss process as a plugin. So all I have to do here is type in autoprefixer and put it in parenthesis. I don't need to put a comma here, because it's the only plugin that I'm installing. So let's go ahead and save that. And now I'm ready to run my gulp process.
So I'm going to go ahead and move over to my preprocess file and in about line 472 I've left a section right here, where I'm going to add some code. So if you take a look at this website and you scroll down to the People section, you can see that the people right now are not in any sort of layout. They're just sort of right on top of each other. So that's the rule that we're going to make, so that we can see the difference. All right, so ... Want to come right in here and then I'm going to use display, flex to activate flexbox, and then do a flex-wrap of wrap.
That way, they will appear side by side properly. And then I'll use justify-content. And in here what I want to do is space-between, so that it adds space, or it treats the space in between as relevant in this flexbox layout. Let's go ahead and save that. And now, after it gets processed, you should see these cards appeared side by side. That's working pretty well. And if we take a look at the difference between what we did right here and the processed output, that should be kind of towards the bottom.
And you can see that those three lines got transformed into a lot more code. And that's the beauty of autoprefixer. You can also control autoprefixer using different options just like we did with cssnano. And all the way at the bottom of the documentation you can see this Options section, which allows you to specify things like a list of browser. So, in the autoprefixer meta, you can add an object that configures autoprefixer just how you want it.
If you want to learn more about Flexbox, take a look at Morten Rand-Hendriksen's course, "Advanced Responsive Layouts with CSS Flexbox". Now, if the only thing you use with postcss is autoprefixer, it'll be well worth it. It saves you a ton of time, and lets you use features like Flexbox in a sensible manner.
In this short course, you'll learn how to set up a workflow for Gulp.jsusing PostCSS, which can speed up the way you build websites and change the way you write CSS. Author Ray Villalobos will also introduce the most useful PostCSS plugins, including cssnano, Autoprefixer, cssnext, and PreCSS.