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
Simply brilliant. Thanks very much.
Very often as a web-developer you need to provide also a support for IE6-8. And when you make website with CSS3 (and not only), this becomes the pain in a butt, I mean the IE filter syntax is quite difficult to remember. I even thought of making such an instrument myself with the support for the IE filters also where it’s possible. Yet since you made this nice instrument, I have no need to reinvent the bicycle once again.
So here’s a user’s request: is it possible to add IE filters support here?
Regarding the css gradients, would it be possible to add the IE filter lines too? Converting the values of the css (first and last values since there is no color-stop available) into the filter values and presenting that on a new line before the -ms-… line?
Also, would you happen to be sharing the code behind this? I would like to have this installed locally on my own computer running PHP so I could try to develop a live version where it would be super quick and nearly automated.
Thanks a ton Jeffrey, you do a heck of job with this site.
It looks like modernizr’s class detections cause an issue too…
Example:
.csstransitions #mainbanner {
opacity: .9;
}
Returns:
-webkit-transitions #mainBanner {
opacity: .9;
-moz-transitions #mainbanner {
opacity:.9;
-o-transitions #mainbanner {
opacity: .9;
-ms-transitions #mainbanner {
opacity: .9;
transitions #mainbanner {
opacity: .9;
}
All fixed. Thanks for spotting that, Nick!
Found a bug:
background-image: linear-gradient(top, hsl(0, 80%, 70%), #BADA55);
should become:
-webkit-gradient(linear, left top, left bottom, from(hsl(0, 80%, 70%)), to(#BADA55));
Instead it turns out as:
-webkit-gradient(linear, left top, left bottom, color-stop(80%, hsl(0,), color-stop(, 70%)), to(#BADA55));
Thanks! Looks like it’s having trouble parsing hsl() functions. I’ve added it to the todo list. Thanks!
How would I run this script within Dreamweaver CS5?
Hi Jeffrey,
thanks for that great work.
I tried to convert border-bottom-left-radius an that is not working.
Any Ideas???
Ronny
That’s coming in the next day or so.
thanks a lot for this great tool you made… it’s a great help…. thanks a lot mr. way once a gain :D
I’ve been following your updates on this via Twitter. It turned out very nice. a big thank you, and huge well done :)
I made a PHP wrapper for the API: http://codecanyon.net/item/prefixr-api/445888
I use a PC and Notepad++. Is it possible to use the API in my case?
This is really nice! If someone could create an Aptana ruble with a shortcut for this, would be great!!
Or is there even a way to include this in Aptana 3?
Thanks in advance.
Epic app Jeffery. Runs very fast on large files, Would be nice to have a select all copy and remove menu but other than that this is a huge time saver! Thanks
Looks very useful, thanks Jeff =)
working for notepad++ addon
Simply incredible.
We made a little program that makes it possible to use prefixr.com on windows ( in your ide).
Can contain bugs because Windows can be a pain in the *** sometimes.
Download Here
thanks jeff for your tutorial
I take the bold and create a mini-plugin for gedit (Linux) http://codr.cc/b08a92/sh
Absolutely fantasmic! Good effort, shout if you want support.
Jeffrey, thanks for this fantastic tool. Will definitely save a lot of time with project. Anyone know if there is a way to run the script within Eclipse?
Anyone…Aptana 3 integration…Anyone know how or if possible?
Jeff,
Love the tool and it worked great on my simple stylesheet.
I have to say that your editing skills have progressed immensely this past year.
I love the way that you now only give us the value-added commentary with no fluff – All of the authors should follow your example – remarkable.
Thanks, Darren!
100% agree with darren. seems so obvious, cut out the fluff, but so few do it. fluffers, i guess, don’t know they’re fluffing or don’t realize how important it is.
webkit-fluff: none !important
moz-fluff: none !important
o-fluff: none !important
Nice One. What about the filters for IE?
really nice tool, I’m thinking about integrating sass to your app :)
hey! awesome! but is there any way of using this in MacVim?
Can you add more functionality to the API? Like the checkboxes in the main page?
Awesome, thanks! just one minor thing
Missed user-select property
{
-moz-user-select:
-webkit-user-select:
user-select:
}
Hi way,
Hi way,
Please include Internet Explorer compatibility.
Nice start Mr. Way..
Thanks!
+1 , that one should be included too, since IE has a lots of audience out there …. -_- ,
I think its like this
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#1e5799′, endColorstr=’#7db9e8′,GradientType=0 );
This one is a really brilliant thing for basic level , web designers !
Thumbs up
This is extremely useful!! You just saved me 1 hour of work :).
Very useful.. Ill use it..
Thankz..
;-)
The Idea is really great and u did again a very good job!
In the text u say that there are many ways to use a curl call in diffrent editors. This is for me absolute new and i am much more interested by the functionality to send a marked text to a webservice, which replace this selection with the result, then by using this tool – after i used the solution with less u showed us in the past.
So when i read the comments here i read ardor, bugreports and often how to use this under windows in aptana, notepad++ and so on. If possible please tell us how we can use the api in other editors (like coda, espresso, macvim, aptana….) and i am sure that we have a lot of webservices we use in our editors in future. Possibilities i see really enough.
It’s really an awesome possibility to enhance our browsers and use this in webapplications with ajaxrequests etc.
WOW,,,,,,,,,, that’s terrific ;-)
Thanks,
Jeffery Way is a genius!
big flaw here:
you might want to check and compared your original code with the new code. Apparently, the Prefixr can take out some of your lines of code, which might explain why you have gaps of white spaces (you’ve been code-jacked).
Any idea how i can use that “shell script” in Notepad++ (win7)?
I’ve finished the plugin for Notepad++
Take a look at https://github.com/DPr00f/PrefixrNpp
Fail loaded
This plugin is not compatible with current version of Notepad++
———————————————————————————-
im running version 5.9.4
xp sp3
prefixr.dll is in plugins folder
???
You can get the netbeans plugin here https://github.com/DPr00f/PrefixrNetbeansPlugin
AWESOME!
For everyone who uses Aptana Studio 3:
Here is the Ruble (Bundle) to make Prefixr work. Put this Snippet in your User “bundle.rb” File:
command ‘CSS Prefixr’ do |cmd|
cmd.key_binding = ‘M1+M2+P’
cmd.output = :replace_selection
cmd.input = :selection
cmd.invoke =<<-EOF
curl -sSd "css=$TM_SELECTED_TEXT" "http://prefixr.com/api/index.php"
EOF
end
For more Information how to add User Bundles to Aptana, please go to the Wiki:
http://wiki.appcelerator.org/display/tis/Creating+a+new+Ruble
Hope it helps :-)
wow this is amazing! thanks for the great tool and Joao for the Notepad++ plugin!
Great article, I fully agree and I think you are doing a goob job in convincing CSS3 is the way to go. We should not wait but use it now.
Using HTML5, CSS3 and a few performance tuning tips and the improvement in speed is dramatic
prefixr doesnt work anymore… please fix it…
Can you provide any details on what you mean? Visiting the site doesn’t work for you?
wow that is awesome! would the api work in Komodo?
I was actually looking for automatic mobile css browser fixes but this is helpful as well. Thanks
Wow !! This is one of the best stuff I have seen after Zen-Coding Plugin. I am sure this is gonna save tons of time. Jeffrey, you are a legend and savior :D
It seems to not work with box layout properties:
display: box;
box-orient: vertical;
box-align: stretch;
box-flex: 1;
It doesn’t seem to support display: box prefixes, but the other three work as expected.
Well, you are right.
Since the “display: box” statement wasn’t prefixed, all the other values collapsed as well.
How long does it take to add the box value to prefixr? It sucks having to remember that not all CSS3 values are correctly prefixed.
And makes debugging broken Stylesheets a nightmare :/
This is a brilliant time saver, thanks Jeff.
I am using Komodo IDE 7. Is there a way to integrate this into Komodo.
Thanks Jeffrey!