FREELessons: 11Length: 32 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.4 Autoprefixer

The Autoprefixer extension for Brackets parses through your CSS code and adds vendor prefixes to your styles to make it as browser-friendly as possible.

Related Links

2.4 Autoprefixer

Hello and welcome back. When you're working in CSS, sometimes it can be difficult to keep track of what vendor prefixes you need to use for what selectors. Because these vendor prefixes change a lot, some prefixes that used to be required are now optional, some of them we don't really need anymore. Well there's a great extension for brackets called auto prefixer which will parse through your CSS code. And add any prefixes that need to be added as well as taking care of old prefixes that we don't need anymore. So this can really save us a lot of time when we're working in CSS. So if we jump into our extensions manager, let's do a search here for auto and there we go. Auto-prefixer, let's click on install. And then once that's installed, we don't notice anything fancy right away. But you'll notice in the edit menu that we have some auto-prefix options here. So we can, just like with our beautify on save, we can also auto-prefix on save. So anytime we save the file, it will add any pre-fixes that we need. Or remove any prefixes we don't need anymore. You can also do an auto prefix when the file is changed. Or you can make a selection and then auto prefix that selection. So there are also some other settings down here at the bottom, but we're not really gonna go into that. So let's jump into a CSS file and let's create a new rule. Let's say that we want a fullscreen rule. So let's point to :fullscreen and maybe the anchor tags inside, and for some reason we want our anchor tags to change colors. So let's just grab one of these colors, it doesn't really matter what. Okay, so this particular bit of CSS does require some vendor prefixes for it to work in all major browsers. So what we can do now, is we can highlight that selection, go to our edit menu, and click on auto prefix selection. Or you'll notice we can hit Ctrl + Shift + P, or Command + Shift + P if you're using a Mac. And when we do that, you'll see that not only does it keep our original rule here, but it also creates a few new rules with those vendor prefixes on them. And it includes any of the property value pairs that we put in our original rule. Again, we can use this to auto prefix or add these prefixes anytime we save our file, simply by going to Edit > Auto prefix on save. And now if I were to hit Ctrl+S to save, it will add those auto prefixes there as well. So again this is just another extension that can save you a lot of time when you're working in CSS. Thank you for watching and I'll see you in the next video.

Back to the top