Lessons: 34Length: 2.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.3 Cross-Browser CSS With Prefixr

In this lesson, I'll show you how to use the Sublime Prefixr plugin to instantly add (or remove) the necessary CSS3 prefixes for your stylesheets.


Prefixr is no longer available. Instead try the Autoprefixer plugin instead (available via Package Control for Sublime Text 2 and 3).

Related Links

4.3 Cross-Browser CSS With Prefixr

In this lesson, I will show you how to use the Sublime Prefixr plugin, which is a plugin created by Will Bond that is based on a tool I built that will take all extra CSS and automatically apply the necessary CSS3 prefixes. So let's just copy this. You can do it at the website, www.prefixr.com. And now you can see notice that it adds on all of those prefixes so that you don't have to remember it, but you don't want to be copying and pasting all of the time. So let's close out of this, and do it from directly within Prefixr. I'm gonna paste that sample code and let's get rid of the variables section, we're not gonna worry about that. All right, so I'm gonna save this and I want to use Prefixr in my editor, so we need to install it. Shift+Cmd+P. Install. Prefixr. And now we have Prefixr support, easy as that. But how do we use it? Well, let's see. I could select some text, go to Edit > Prefixr or notice that the shortcut is Ctrl+Cmd+X on the Mac. But now I want you to note that, that runs it through the Prefixr service and automatically updates all of that. And as you can see it does a lot because a lot is needed. For background gradients you gotta have webkit, Mozilla, Opera, Microsoft, and you can go to www.caniuse.com to see all the ones that are necessary. Let's backtrack by hitting Cmd+Z and let's see what it does for keyframes. Ctrl+Cmd+X, runs it through the service and now it automatically sets the necessary keyframes. And it even knows for example, and Mozilla, it doesn't like double quotes around, even though it's part of the spec, it doesn't seem to work well, at least the last time I checked. Or, you can select the entire style sheet and run the whole thing through. Now a quick note, a lot of people will try to, run a single property through, like that. But that's not the way it works. Now what you can do though is, you don't have to select a property, as long as the cursor is within the property, Will Bond set it up so that it knows to just grab that property. So run it and that will update that entire section. And it's really quite simple. So now when you're coding, just use the official form. Transition, will do everything over the course of one second, and then, you can run it through Prefixr and it'll figure out all of those prefixes so that you don't have to worry about that. Hit control Cmd+X and now it's updated us. Very cool.

Back to the top