Cross-Browser CSS in Seconds!

/* Want variables? Or, if you don't like that idea, just ignore it. */
/* Try it out. Click the Prefixize button. */
.box {
   opacity: .5;
.container {
   box-shadow: 20px;
   -moz-transition: -moz-box-shadow 2s;
   -webkit-border-radius: 4px;
   animation: slide 1s alternate;
   background: linear-gradient(top, #e3e3e3 10%, white);
   display: -moz-box;
@-webkit-keyframes "slide" {
   0% { left: 0; box-shadow: 10px 10px 10px black; }
   100% { left: 50px; box-shadow: 5px 5px 5px black; }
/* Want variables? Or, if you don't like that idea, just ignore it. */
@variables {
  main_color: red;  
.content {
  background: var(main_color);



What is Prefixr actually?
Many people wonder what exactly is meant by Prefixr! What is its purpose and how it can make developers life easy?!
So, what do you think Prefixr actually is?! Let me break the mystery for you!
Prefixr is a cross-browser CSS tool that has the awesome capability of adding vendor prefixes automatically to your style sheet and delivering the perfect end-result almost in an instant, in as less as one second’s time. Let’s dig a little deeper now. With Prefixr, you can get rid of the need of adding all the annoying CSS3 prefixes on your own. There’ll be no need of rewriting the same prefixes over and over again. You can simply do away with that task! The entire job will get completed in the blink of an eye.
Furthermore, it’s nothing like an operation that you might regret later, because it doesn’t have in it to cause any harm to your CSS. All you need to do is create style sheets just like you need, using the official syntax, and then just run it past the Prefixr tool. You’ll get professional assistance with respect to every prefix that needs to be added, in an entirely automated manner.

How Prefixr does what it does?
In order to use Prefixr to the best of its ability, you must create your style sheet using the official syntax. This is very important. Because if you don’t employ the exact rules and terms that Prefixr recognizes and understands, you won’t get the desired results from the tool. You must run your CSS through Prefixr only after you’re sure that you’ve used everything as expected by the Prefixr tool, using the official syntax.
You give the tool what it needs and it’ll return the perfectly prefixed style sheet back to you!

Theory behind the workings of the Prefixr tool
A lot of knowledge and hard work has gone into the creation of Prefixr tool. The Prefixr tool’s code has been created using techniques that deal with the prefixes in the most efficient manner, allowing you to not care about them at all. To the extent that you can blindly trust its efficiency and precision. All that you need to take care of is using the official syntax. Else, it won’t work.
Let me explain it’s working to you with an example. Let’s say you got a CSS that you’d like updated and you’ve created it using the official syntax. However, there’s one problem. You’ve made plenty of mistakes by duplicating the styling more than it should have been. And that’s not even required at that point of time. Prefixr can be the perfect tool to come to your rescue in such a situation, as it can handle all those unwanted prefixes in the CSS, without you having to deal with them manually.
If you need a consistent web application that works perfectly on all the different web browsers, as well as their different versions, all you need to do is use various types of supporting prefixes. But doing that on your own requires plenty of effort. Moreover, there are chances of making errors here and there unknowingly. That’s the time you can use the services of Prefixr tool.
You can use the Prefixr tool from inside your code editor too, as there are scripts, plugins and extensions available for all popular code editors like Sublime Text, TextMate and many more. You can simply summon up the services of the Prefixr tool by using certain command key combinations or accessing the Prefixr tool from the menu of the respective code editor. This way you won’t have to do a manual copy paste in Prefixr every time you need to add prefixes to your style sheet.
So, if you’re on a Linux or a Windows operating system, all you need to do is hold down the Ctrl + Alt + X key combination, and you’ll get what you need without wasting too much time and effort on copy pasting the style sheet. In case you’re on OSX, you simply need to use the Cmd + Ctrl + X key combination to get the results.
Let’s talk about TextMate, which is used by countless developers out there. You can easily create a new TextMate command using its Bundle Editor. Thereafter, any selection in the code can be run through the Prefixr tool and the resultant, modified code will get placed on the clipboard for your use. You can even store the results obtained from the Prefixr tool in a separate style sheet by assigning an activation key. In case you require compressed results, simply use the ‘compress_option’ command and it’ll do the trick for you.
Talking more about the code editors, following are some code editors that are supported by the Prefixr tool. I’m sure your favorite one would be here on this list too! If not, don’t worry, perhaps it’s supported, but we’ve been too lazy to keep this list updated!
- Sublime Text 2
- Espresso
- Phing (Build Script)
- Command Line / Terminal
- TextMate
- Alfred
- Vim
- Coda
- Ant (Building Tool)

What you need for Prefixr to do its job?
Well, it should be pretty clear by now! Nevertheless, let me put it again. As mentioned above, Prefixr takes care of all your CSS3 prefixes and adds them to your style sheet, without you having to add them manually on your own. In order to make Prefixr do its job, you need to supply it with a style sheet created with official syntax.

The use of variables
A very frequently asked question about the Prefixr tool is if one can use variables with it? Let me answer it in a bit different way. If you carry out a comparative analysis between Prefixr tool and Sass, Stylus or Less, you’ll notice that Prefixr isn’t like any of those preprocessors. The answer to the variables question lies in this statement. If you don’t like using Stylus or Sass, there’s no way you’ll be disappointed with Prefixr.
Although you can use variables, you’d need to be aware that usage of variables complicates the CSS a bit. So, it’s recommended to not use the variables a lot, unless you’re comfortable dealing with them.