Tutorial Details
- Tool - Prefixr
- Usage - Automatically update CSS3 properties.
A couple weeks ago, as I began to manually update my stylesheet with all of the various browser prefixes for the new CSS3 properties, I thought to myself, “This is such a waste of time. Surely, there’s an easier way.”
Video Overview
Tools like Compass, or even a TextMate bundle are tremendously helpful – I use them often, actually. But, for many projects, they aren’t available. As a result, we’re left in the position of having to copy and paste over, and over…and over.
Introducing Prefixr.com (Alpha)
I built Prefixr to do all this tedious work for me. Simply paste in your stylesheet, press Prefixize (or hit Control + Enter), and Prefixr will filter through the applicable CSS3 properties and dynamically update them.
Can’t remember if Opera provides a prefixed version of, say, the transition property (o-transition)? Don’t worry about it; that’s already coded into Prefixr!
With Prefixr, you only code your stylesheets using the official W3C-recommended markup. When ready for deployment, run the stylesheet through Prefixr, and be done with it!
Use the API
Even better than visiting Prefixr.com is using its API from directly within your favorite code editor. Many editors, like TextMate, offer the ability to execute shell scripts. To automatically update your stylesheet in TextMate, create a new command, and paste in:
curl -sSd "css=$TM_SELECTED_TEXT" "http://prefixr.com/api/index.php"
Now, select your stylesheet, and type the shortcut that you assigned. It will then be filtered through Prefixr, and dynamically updated. (See video above for more details.)
Squash Those Bugs
This is officially an Alpha release, which means that there are still some bugs to squash. All the kinks should be ironed out within this next week. If you find any yourself, there’s a Feedback button on the left-hand side of Prefixr.com that you can use to notify me.
I hope this tool will be of help to you! Be sure to bookmark it!
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
Hey guys –
Just a couple quick notes on bugs that I’m fixing today:
1) Commented CSS3 properties are prefixized as well. Needs to be fixed.
2) Prefixr gets pissy at @import statements. (Should be a quick fix.)
Do people still use @import?
Yes, actually. I use it in WordPress themes. I create the base style.css, an then use multiple @import statements to bring those files in from a css directory.
It allows things to be much more neat and organized, in my opinion.
@import is quite useful if you want include CSS files that will be removed or renamed in future, easily and separately add CSS reset, when you need to add CSS file to not make it messy with previous designer code or simply don’t have access to Header to add them there (for example sometimes when you work with .net).
So, yes, people still use them.
:)
Of course!
I use @import to link the CSS reset. It’s a lot better than having that brick of text at the top of my editor.
Yes a lot of people do use @import, i use it to split big css files(sort the stuff)
Nice tool Jeff!
Correct me if I’m wrong, but I think bill was commenting on the fact that the best practice was to *not* use @import, and instead create additional ‘s, or use a build script. The @import method creates an unnecessary delay.
If all stylesheets are in tags, the browser may initiate all requests as soon as the is processed and there is no delay.
Using the @import method, only the first stylesheet can be loaded while the head is processed, and all subsequent stylesheets must be loaded after the initial stylesheet request has been loaded, because the @import command won’t even be visible to the browser until the request is complete and the file parsed (at lease up to the line with the @import command).
In my Super Duper Scientific™ quick test, you can see that with two simple stylesheets, the CSS load time effectively doubles for the exact same end effect:
http://travis.watson.ws/css-latency/at-import/
Note that this is on HostGator Reseller hosting (aka shared) so the actual load times are going to be all over, but you can at least see the concept.
…and I forgot to escape my entities, I’m so pro. In that first sentence, there’s a lone apostrophe-s, that’s supposed to be: “<link>’s”
your book realy don’t make sense !
Awesome! I’ve been watching the videos that you post on the twit-machine and am very excited to give it a whirl!
Looks great Jeff!
Prove it for sure! Thanks for sharing!
Hello Jeffrey…
Definatelly another great tool you bring to us… luved
Awesome tool…
I hope it graduates to beta version soon.
YOU ARE A MACHINE!!!
Another great freebie thanks for this – this is precisely waht makes Envato great because you guys could have easily made this and sold it over at CodeCanyon but you chose to give it away for free.
Thanks a bunch!!!
Excellent tool!
Def bookmarked and sent around the office!
Thank you so much!
body{
text-transform:uppercase;
}
gets converted to
body{
-webkit-transform: uppercase;
-moz-transform: uppercase;
-o-transform: uppercase;
-ms-transform: uppercase;
transform: uppercase;
}
Thanks for spotting that. All fixed and updated now. :)
Hey nice. I have a question.
I don’t have a Mac. So i don’t have a TextMate :(
How i cant integrate this feature (to prefixize) my code in Dreamweaver CS4 or CS5?
Is this possible?
I don’t think CS4/CS5 would really need to allow command line scripting first. Also it does not hurt to have the original with the settings for 1 browser and then copy/paste on the web interface and click compress and upload that version while retaining the original on your OS (easier to edit).
I meant : “I think CS4/CS5 would really need to allow command line scripting first.”… don’t ask, I reworded something and butchered it.
Hi Alex,
You asked about getting this to work in a Windows based editor?
I use E Text Editor and I can confirm that this works perfectly. E is basically a Text Mate clone for Windows. I highly recommend it.
Good luck!
Great stuff for time safer! this is what i’m looking for. Thanks, i’m look forward for next version
thanks Jeffrey :)
Nice app!
Would it be possible to add comments?
Something like….
-moz-border-radius: 10px; /* FF1-3.6 */
-webkit-border-radius: 10px; /* Saf3-4, iOS 1-3.2, Android <1.6 */
border-radius: 10px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
Thanks a lot for sharing.
Awesome Jeffrey.
That save lots of time. Bookmarked with pleasure.
Thanks.
Jeffrey, THANK YOU!!! :) Any plans for a coda plugin?
I’m working with sublime text editor. I’m somewhat new to all this stuff. Is it possible to run curl under sublime? If yes – how to?
I agree, well done. As Matt said, do you know anyway to get this to work with Coda?
I created a Coda plugin for this, and sent it over to Jeffrey.. I’m assuming he’s going to post it but feel free to email and I’ll send it over..
hey this may be stupid but how do i email you?
can you put it up on dropbox or something would be really handy.
I would be interested in a Coda plugin as well.
Thank you and thanks Jeffery!!!
Hey Tim,
I would be interested to test the Coda plugin too is it’s possible :)
Thanks !
Thanks Tim, your plugin in much anticipated!
I would love a copy of the coda plugin as well (not much of a textmate dev)
really amazing thanks a lot for making it so simple
NO COMMENT !!
i love this tool ! thx
Or you are a genius, or you are like me: tired to make rounds like a cat after its tail asking you wtf is happening. And after two hours, two bucks of coffee, and after playing with the tomahawk, discovering that in lines 3675, 4211, 5734 of your css you had typed wbkt, or webkt, or maz.
Thanks for your huge contribution to designer’s mental health! You’ll be blessed for that, for sure.
Holy, sh** balls, Jeffrey. This is awesome. Well done.
For PC users whats for us? … some notepad++ or dreamweaver plugin will be great..
Hey guys – I don’t know how to implement shell scripts on Coda, Dreamweaver, or Notepad++. I’m sure there’s a way. If you use that editor and know how to do it, please leave a comment, and I’ll update the docs!
This is really sweet.
If anyone knows how to integrate this into Aptana 3 that would be very very sweet.
Thanks Jeffrey for another kick ass freebie.
Smart!
This is fantastic, Jeffrey! One question, though. Is there a way to do something like:
border-top-right-radius: 6px;
and convert it into:
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topright: 6px;
border-top-right-radius: 6px;
…since right now only the border-radius property will convert. Cheers!
Is “css=” the only option in the api? Are there options for the exclusion and formatting features in the api as well?
Right now – yes. Fixing that over the next few days.
Just a quick question. Which browsers need -ms and -khtml prefixes?
-ms- is for microsoft Internet explorer and
-khtml- for Konqueror
KHTML is also used on earlier versions of Safari < 2.
It’s amazing!!! It’s great!
Is anybody know how to integrate this feature into NetBeans ?
Thanks a lot.
hey Jeffrey
how about opacity?
Oh you’re right. I forgot about that one. Just made a note to include it tomorrow. :)
For notepad++
I think you can use NppExec and wget module
It is weird that telnet is not support in console
Here is a textmate command that works better for me:
curl -sd “css=`cat`” “http://prefixr.com/api/index.php”
Set the input to entire document and output to replace entire document for prefixr-ing the entire css file without selected all. Or set the input to selected text and output to replace selected text for prefixr-ing just the selected text. I made both commands. Also you should probably set the scope to source.css
ahh-mazing!!
This will save hours of coding; Thank You very much!
Any ideas on how to integrate this with MacVim?
So I’m definitely far from experienced with VIM but I haven’t seen anything regarding a VIM command to access the API, and I’ve been playing around trying to get it to work. Hopefully someone more skilled can help sort out the mess I’ve made. So far all I can do is run a command from inside VIM to return the result of a string of CSS written in the command: (only been playing with this on my Windows machine, but I don’t think anything would be different on Linux or Mac except the calling curl part)
:r !path\to\curl.exe -sS http://prefixr.com/api/index.php –request POST –data css=”border-radius:5px;”
Will write:
-webkit-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
-ms-border-radius:5px;
-khtml-border-radius:5px;
border-radius:5px
into the buffer at your cursor.
Problems I’m having:
- Using text from the file as the POST data, I’ve been looking around and found that % should be a reference to the entire contents of the file. When I try something like :r % this behaves as expected, and writes the entire contents of the file at the cursor. However when I use % in place of explicit border-radius declaration in the command, the filename is used instead of the contents of the file. I’ve probably been searching with the wrong keywords – if anyone can shed some light for me on how to pass a variable into an arbitrary position in the command that would be awesome
- This one’s probably much easier, and probably gives me a big bright badge that says “VIM NEWBIE” – but replacing text in the buffer with the returned data from the API, right now I’m just using :r which will just insert the result at the cursor, leaving behind the content that was already there.
I haven’t used it yet, but try the Vim plugin here: http://prefixr.com/api/usage/
Just what I was looking for! A huge thanks to you Jeffery for putting the tool together and pointing out the plugin, been talking it up at the office since I first saw it. Also thanks to Mark Szymanski for putting the Vim plugin together!
check http://prefixr.com on ie 8 css3 is not working.
any reason?
You seriously rock, Jeffery! Thanks a ton.
For those of you that use Coda, I created a plugin to to access the Prefixr api via shortcut.. I’ve sent it to Jeffrey to include in the Prefixr documentation but until it he posts it publicly I’ve uploaded it to my S3 account and made it available for download.. you can access it here: https://s3.amazonaws.com/rawcreative/misc/Prefixr.codaplugin
Usage is simple, make a selection and hit Control+Option+P and it will send the info to Prefixr and replace the selection with Prefixr’s results. If Jeffrey adds any additional functionality to the API I’ll update the plugin and redistribute it.. you can also email me at tim at rawcreativestudios dot com with questions/issues
Thanks a lot for making and sharing the Coda plugin that’s sweet.
That’s really amazing. I can save a lot of time spending to write lines of code for these.
This is really sweet! I will have to start using it!
Is there a way to use the API in Vim
I know this may be more difficult and possibly not even desired in this tool but older versions of IE dont understand rgba, it would be sweet if the code had a background-color of say rgba(255,255,255,.5) that it would output #FFFFFF as a background color also for browsers that ignored rgba.
What a good idea! Thanks Jeffrey
Really neat tool Jeffrey!
Is it possible you can optimize it for SASS/SCSS code?
nice post! it is great pleasure to visit your site. thanks!!
Would love to know how to include this in Notepad++ Can anybody explain me how to do this?
Awesome.
We now just need an AppleScript or Automator service o be able to use in any app. :)
This is a great time saver!!
Any way that you would be able to add the includes for PIE?
“text-shadow” don’t work
That doesn’t need browser prefixes.
Looks really nice. Currently we use Compass with Sass but need to check this out for non-Sass sites.
Very cool project Jeffrey!
Added this into KomodoEdit. Works awesome. Thanks.