Cross-Browser CSS in Seconds with Prefixr

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!