Prefixr OS X Service

Just for giggles, and because Jeffrey Way was kind enough to provide a simple API for Prefixr, here’s a System Service that will turn your standard CSS3 properties into cross-browser, vendor-prefixed versions.

You can select an entire stylesheet and it will send back the text with the necessary changes, or just run it on a single rule to have it vendor-prefixed for you. It turns this:

p {
  transition: all .2s ease-in-out;
  box-shadow: 1px 1px 4px rgba(0,0,0,.3) ;
  color: #333;
}

into:

p {
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;

	-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,.3);
	-moz-box-shadow: 1px 1px 4px rgba(0,0,0,.3);
	box-shadow: 1px 1px 4px rgba(0,0,0,.3);

	color: #333;
}

Pretty handy. Sass can do this for you, and there are already plugins for TextMate, Vim, Espresso, Coda and more on Prefixr’s API page. Just thought I’d add one more to the pile.

Unzip it and drop it into ~/Library/Services. Select some text containing CSS3 properties and right click on the selection, then look under “Services” for the Prefixer service. Run it and (assuming you have an internet connection), it’ll do some of the tedious parts of CSS3 for you.