Many of you might be aware that we recently launched a helpful web service, called Nettuts+ Prefixr. Thankfully, the tool has come a long way since the initial launch, as I’ve squashed countless bugs, and added some neat new features. I’d like to give you a quick rundown on the current state of the tool, as well as how to use it.
Wait – What is Prefixr?
Prefixr takes all of those pesky CSS3 prefixes that we must type over and over, and does away with them! If you create your stylesheets using the official syntax, you may then, at deployment, run your clean stylesheet through Prefixr, and it’ll instantly update your stylesheet to include every required prefix.
This way, you don’t have to deal with remembering whether or not a particular CSS3 property requires a -ms prefix or not. That knowledge is built into Prefixr.
Let’s review a quick example. Below, I have some scattered CSS that is badly in need of updating. Notice that, in some places, we’ve only declared a -moz prefix; in other areas, we’ve used the official syntax, etc.
.box {
opacity: .5;
}
.container {
box-shadow: 20px;
-moz-transition: box-shadow 2s;
-webkit-border-radius: 4px;
animation: slide 1s alternate;
background: linear-gradient(top, #e3e3e3 10%, white);
}
@-webkit-keyframes "slide" {
0% { left: 0; }
100% { left: 50px; }
}
Copy the code above, and paste it into Prefixr. In return, you’ll receive:
.box {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: .5;
}
.container {
-webkit-box-shadow: 20px;
-moz-box-shadow: 20px;
box-shadow: 20px;
-webkit-transition: box-shadow 2s;
-moz-transition: box-shadow 2s;
-o-transition: box-shadow 2s;
-ms-transition: box-shadow 2s;
transition: box-shadow 2s;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-animation: slide 1s alternate;
-moz-animation: slide 1s alternate;
-ms-animation: slide 1s alternate;
animation: slide 1s alternate;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #e3e3e3), to(white));
background: -webkit-linear-gradient(top, #e3e3e3 10%, white);
background: -moz-linear-gradient(top, #e3e3e3 10%, white);
background: -o-linear-gradient(top, #e3e3e3 10%, white);
background: -ms-linear-gradient(top, #e3e3e3 10%, white);
background: linear-gradient(top, #e3e3e3 10%, white);
}
@keyframes "slide" {
0% {
left: 0;
}
100% {
left: 50px;
}
}
@-moz-keyframes "slide" {
0% {
left: 0;
}
100% {
left: 50px;
}
}
@-webkit-keyframes "slide" {
0% {
left: 0;
}
100% {
left: 50px;
}
}
@-ms-keyframes "slide" {
0% {
left: 0;
}
100% {
left: 50px;
}
}
Wow – that’s a lot of duplicate styling. But, unfortunately, it’s necessary at this point in time. If you want your web applications to be as consistent as possible from browser to browser, you need to use these various prefixes. However, as you can imagine, this can quickly bloat your code. That’s why Prefixr is so helpful!
Create your stylesheets using the official syntax, and then run it through Prefixr when you deploy, or when you need a conversion.
I Don’t Want to Copy and Paste into Prefixr
No worries! I don’t either. Visiting Prefixr.com is only one way to update your stylesheets. I much prefer to use it within my favorite code editor. Thanks to various users, there are a handful of plugins and scripts available for the most popular editors. For example, as a Sublime Text user, I personally use Will Bond’s “Sublime Prefixr” plugin, which works wonderfully.
Now, I never to have to manually visit Prefixr and copy and paste my stylesheet. I simply select the bit of CSS that I wish to optimize, and type ctrl+alt+x on Windows and Linux, or cmd+ctrl+x on OSX.
Editors List
Refer below for the current list of supported editors.
TextMate Commands
There are countless TextMate users out there; let’s create a command that will run a selection through Prefixr, and place the result in the clipboard. Within TextMate, browse to the Bundle Editor, and create a new command.
Paste the following into the “Command” textarea. This will take the selected text, run it through Prefixr, and copy the response to your clipboard. Next, assign an activation key, and you’re all set! This is helpful if you’d prefer to store the Prefixed results in a separate stylesheet.
curl -sSd "css=$TM_SELECTED_TEXT" "http://prefixr.com/api/index.php" | pbcopy
Or, if you’d prefer the result to be compressed, modify the command, like so:
curl -sSd "css=$TM_SELECTED_TEXT&compress_option=true" "http://prefixr.com/api/index.php" | pbcopy
Now, if your stylesheet displays:
.box {
border-radius: 5px;
}
Select the stylesheet, type the activation key that you assigned, and the following should now be stored in your clipboard (assuming you use the compress option).
.box{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
Can I Use Variables?
Prefixr isn’t the same type of preprocessor as Less, Stylus, or Sass. I love those – Sass and Stylus particularly. Prefixr is instead for the folks who dislike the idea of using them. That said, variables do come in handy, so if you’d like to use them in Prefixr, it will automatically update your stylesheets. For example:
@variables {
site_width: 960px;
}
.container {
width: var(site_width);
}
Run it through Prefixr, and we get:
.container {
width: 960px;
}
It’s important to note that this is entirely an optional feature. If you feel that variables complicate CSS, then don’t use this feature!
Requests?
Nettuts+ Prefixr is under active development, so if you notice a bug or would like a new feature to be implemented, either leave a comment below, or click on the “Feedback” button at Prefixr.com.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Less support would be awesome.
In what way do you imagine it being integrated? Like a compiler?
yes like the app CodeKit (from the same guy who made Less.app), the only problem is the includes, i can’t imagine how to deal with it.
Yeah – that’s really not what Prefixr is for. I’d rather keep it more targeted.
Awesome update!! I use this all the time in Coda ;)
Are you planning on making it open source anytime soon? I would love to contribute and help in anyway that I can. It’s a great idea and I would really enjoy helping out.
Once I have a bit of time to refactor the code, then yes.
It would be nice if it remembered the selected option once prefixize is clicked.
Yeah – I agree. I’ll add in shortly.
I’m using the Vim API, but I always get an error while running the script on Windows 7. The script will work, but with an error.
I’m waiting for support options in the API, for instance compressing or execute browsers.
Just pass compress_option=true via your POST request.
will we ever get a Dreamweaver extension?
It’s just a matter of a Dreamweaver user creating one.
Jeffrey,
In October i notice this: http://coding.smashingmagazine.com/2011/10/12/prefixfree-break-free-from-css-prefix-hell/
But i saw that you release the Prefixr in August…
So there is a identical functionally? I didn’t understand if the PrefixFree copied Prefixr.
Ps.: Sorry, my english isn’t pretty, cheers from Brazil!
Prefix-free is not a copy of Prefixr – at all. Lea just went with a different approach to solve the issue of CSS3 prefixes. She uses JavaScript and some form of browser/feature detection to figure out which prefix to use. That way, your stylesheets are smaller. But, of course, you’re then using JavaScript. It’s a neat idea, nonetheless.
Jeffrey, congratulations again for this wonderfull web app. I realized that It doesn’t recognize this kind of prefix:
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
And I have to change the css to this:
border-radius: 0 0 10px 10px;
to obtain this:
-webkit-border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
I always use this version, but I received a work from a colleague and I wanted to compress its css file with your app and I noticed that.
Thank you again for your effort.
Yeah – haven’t yet added support for border-X-radius. Will do so soon.
A short time ago, I actually built a mini app that fills in the extra code for keyframe animations:
http://animationfillcode.com/
As I mention in the help section, it was inspired by Prefixr (partly because Prefixr didn’t include keyframe stuff at the time) and by the fact that I was fiddling around with animations and found it annoying to keep duplicating everything.
I guess my app is now obsolete? :)
requests? Notepad++ support
https://github.com/DPr00f/PrefixrNpp by Joao Lopes works perfect :D
Thanks man, it works.
Hello,
Im still having the problem, that if I paste a large css file, it bugs, and return notning – at the moment Wien I paste around 3200 Lines of code, then it just returns a blank textarea :(
FYI,
there is also a plugin for the Netbeans IDE available.
Regards.
I just happened to go into the Plugins section of my copy of NetBeans and notice that there is a Community Contributed Plugin already in there for Prefixr. Seems it was add back in Aug. I didn’t know it was there.
Thanks for a handy tool.
I personally prefer using one tab space for indentation over three spaces. Any possibility of changing that or adding as an option?
Yeah – I can get that taken care of today.
Okay. Now using a tab instead of three spaces. :)
Nice!! Very much appreciated update! :)
Prefxer is nice but when it terms of IE. Problems!!
What do you mean?
you rock jeff
Jeff, great update. I can’t believe how easy it is to install on ST2! Works great, the combination of auto-complete and the ctrl-alt-x makes it sickeningly fast, I mean just crazy fast.
100% Awesome.
I use this instead, and just skip the whole compile step:
http://leaverou.github.com/prefixfree/
Thats great!
how do i install it on windows?
I’d love to see a how-to on bringing this into Eclipse using Ant builds!
Nice article.Thank you for sharing.
Great Article, very very helpful indeed!
This prefixr does not work on Sublime Text 2 I have installed and its in Edit menu but when I click on the prefix it does nothing.