7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 15Length: 1.8 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

3.2 How to Use an Autoprefixer

Let’s look at how to autoprefix compiled CSS. This is such a helpful and time-saving technique, and it integrates nicely within our Gulp workflow. Let’s check it out.

Related Links

3.2 How to Use an Autoprefixer

Hello and welcome back to this course. In this lesson, you are going to learn how to auto prefix your CSS. This is such a helpful and time-saving technique, and it integrates really nicely into our gulp workflow. Now if you don't know what auto-prefixing, auto-prefixing is. You probably know that certain CSS properties require certain vendor prefixes in order to be recognized by certain browsers. For example, certain properties might require the prefix dash-mos-dash for Firefox, or dot-webkit-dash for webkit browsers like Chrome and Safari, or dot-ms-dash for Internet Explorer, dot-o for Opera, and so on. Now there is a gulp plug-in, called gulp-dash-autoprefixer, that basically reads. Whatever CSS file we give it, and it's going to add these vendor prefixes according to the values suggested by the, Can I Use website. This website right here. I am sure you have seen it before. Basically, you search for a feature, and it tells you what browsers currently support that feature. For example, Flexbox, right? So based on this, the Autoprefixer plug-in will add the correct vendor prefixes. So to install it, really simple, we do an npm install or npm i. You can do that as well. It works both ways. gulp-autoprefixer, I'll also save it as a dependency, right? So once that's installed, we'll go ahead and load our plugin right here. We'll call it autoprefixer. And then, the autoprefixer requires a CSS file to work. So it accepts a CSS file, and it returns a CSS file. Now, there are two ways we can do this. Either where reading the CSS files after they've been compiled from Sass and they've been written to the disk, and then auto-prefixing them, and again writing them on the disk. Or we can use the Sass function, and we can pipe the data stream from the Sass function to the auto prefix. So the Sass plugin here, basically, accepts Sass files and returns CSS files. So after this plugin is run, the data stream will contain a CSS file. And we can tap into that. We can say pipe(autoprefixer()), and that's it. The stream will now be run through the autoprefixer plugin. That's gonna add the necessary vendor prefixes, it's gonna return the stream, which will be then passed onto the gulp dest, and it will be written to the CSS. So instead of reading a CSS file after it was written to this, and then writing it again on the disk, we're basically inserting a pipe, right here, between Sass and writing on the disk. Now, the autoprefixer also has options. For example, you can specify which browsers you want to support. In my case, I wanna support the last two versions of all the major browsers, and also I want to support IE between 6 and 8. This is just an example, we can leave it with the default, you can specify your own browsers to support. So now If we're gonna run our Gulp here. And we'll take a look at the generated CSS, we don't see that much actually. Because we don't have any properties that require autoprefixing. But if for example, I'm gonna set display to flex. That's gonna be a run. Let me show you the terminal. That's gonna be a run through the Sass task, which in turn will run that data stream through the autoprefixer, and the result is gonna be the body has display of flex but also these. These are the vendor prefixes I was telling you about. Just as a comparison, right? Let me interrupt this task. Let me just comment this bit, so that you can see the difference between running with the prefixer and running without the autoprefixer. So I'm gonna just say, gulp sass, here. Right, this only displayed the property that I set here. Let's add also box-shadow for example, 0 0 3px black, right? I'm gonna run sass again. Right. And it only displays the normal properties. But as soon as I tell it to pipe it through the autoprefixer, and I run sass again, it now generates those properties with the proper vendor prefixes. As you can see, web kit and ns for flex box and only web kit for box shadow, pretty, pretty awesome. And that's how you can work with CSS files, or more specifically with Sass or LESS files inside Gulp. We didn't cover the LESS version because as I said, it's the exact same thing. You just need to load a different plugin. So right now, we're compiling SCSS files, and then we're auto-prefixing the generated CSS file. And finally, we're outputting everything in the dest folder. Now, you can also minify CSS, if that's what you want. There are a bunch of plugins that do that. They exist, Gulp, Grunt, whatever test run or there is for npm, right? Just for node, there are simple node plugins that do not require a Gulp or Grunt. But just go to the NPM website, search for css concat gulp, or search Google for that, you'll find a bunch of plugins. And the way they work is very similar to what I just showed you. You just either pipe an existing stream into them. For example, if we look at the gulp file here, a good place would be right here. So you would say, pipe and then concat css, whatever the plugin is called. So you can concatenate, not concatenate, excuse, minify css, it would minify the css, and then you would output to dest, again, do your own research on this. So this covers the CSS bit of our work flow. What about JavaScript? More specifically, how do we concatenate and minify JavaScript? Well, we're going to cover that in the next lesson.

Back to the top