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);



Prefixr – cross-browser CSS of which you can be 100% satisfied

What is Prefixr?
Let’s begin with one question: What do you think Prefixr is? We do not mean on prefix, we mean on Prefixr. Actually, this is a cross-browser CSS in which you get the results in just a second. Okay, now we can explain deeply what that actually means. Prefixr is a cross-browser that takes all pesky CSS3 prefixes, so it helps you to not rewrite again and again same prefixes, because it does away with them. This job will be perfectly done in a second. It’s not something that you will regret if you use it, because it can’t make any mistake that you can mention as a disadvantage. You can create stylesheets like you want by yourself, and you can do that wish using official syntax and after that to run it through Prefixr, so you will have professional help for every required prefix.

How works Prefixr?
You have to create stylesheet but you have to use the official syntax, because if you don’t use those terms and rules, Prefixr can’t help you to deal with your problem. When you are sure that you use everything like its properly and also the official syntax, than you can run it through Prefixr if you need a conversion.

How words Prefixr theoretically? (with examples)
There is a knowledge into Prefixr, there is a technique that can deal with those prefixes and that helps you to not care about them at all, because you can count on something that can help you perfectly. All you have to do to use Prefixr and to work properly, you have to use the official syntax, because if you do not use it, Prefixr can’t help you. For example, if you have CSS that you want to update and you used the official syntax, but you have made a lot of mistakes because you duplicated the styling more than you should, and at that point in time, you do not need that. Well, Prefixr is the right solution in this case, because it can deal with those prefixes that are unwanted in the text, instead of you. If you want a consistent web application from browser to browser, you just have to use various of prefixes, but that can bloat your code, and that is the time that Prefixr can help you.

If you want you can use within code editor because there are plugins and scripts that are really handful and they are available every time you need. For example, if you decide you can use Sublime Prefixr, which is plugin that works amazing.

Also, you don’t have to always visit Prefixr and to write what you want to get, or to copy and paste the stylesheet, because you can do that on a very simple way. You can select the CSS that you want to optimize, and you hold CTRL+ALT+X if you have Windows operative system, or Linux, and on OSX you type cmd+ctrl+x, and there you get what you need without losing too much time on copy and paste the stylesheet. But if you want, you can use Prefixr in your Favorite Code Editor, if you do not understand what we want to say, just look at the list of supported editors, so you can clearly know what we mean. The supported editors in which you can use Prefixr are : Command Line/ Terminal ; OSX ; Sublime Text 2; TextMate ; Espresso; Vim; Alfred; Coda; Phing (Build Script). Now it is easier to understand. To know something more deeply about this program, we can take a look at TextMate Commands, because we are sure that out there are countless users of TextMate. You can run a selection through Prefixr, but first you have to create a command. When you do everything properly, you will get the result placed in the clipboard. You can create a new command with Bundle Editor.

When you have a stylesheet you just have to paste into the “Command” text area so it can be run through Prefixr and the results will be pasted on your clipboard. It is amazing, we know that, but the most positive thing is that it works in a second. Also, if you prefer to store the results from Prefixr in a separated stylesheets, you just have to assign an activation key, and that is all. If you want to get a compressed results, you have to use the command “compress_option”, and you have results, or bettere said stylesheets and then you have to type the activation key so you now get the results that you needed.

About what is required Prefixr?
Like we mentioned before, Prefixr takes all CSS3 prefixes and does away with them instead of you. If you have stylesheet in which is used the official syntax, just run it through Prefixr and just for a second, just for a moment it will instantly update your stylesheet so you have got the help that you needed with included every required prefix. Also, you do not have to remember a particular CSS3 property, because Prefixr knows that because that knowledge is built inside the program.

Using variables
One of the most often questions from the users of Prefixr, is that if they can use variables? Well, if you compare Prefixr with Less, Stylus or Sass, there is not the same type of preprocessor. So there is the solution for that question. If you do not like using Sass or Stylus, you just can’t miss using Prefixr, because it can replace them just for a second. You can use variables, but if you use them in Prefixr you have to know that automatically it will update your stylesheet. But, using variables complicates CSS a little bit, so it is preferred to not use them a lot, but if you can deal with it, it is not a problem. But have in mind that this command is optional, so you can use it if you want to.