Get Cross-Browser CSS in Seconds with Prefixr

Nettuts+ Prefixr

Prefixr is a handy online tool brought to the Interwebs by the awesome Nettuts+ peeps.

Simply drop in your CSS, press “Prefixize” and Prefixr converts your code into a piece of cross-browser beauty.

Here’s a before and after snippet as well as the options included with Prefixr:

Prefixr

The formatting options include:

  • Compress My Code
  • Add Line Break After CSS3 Properties
  • Don’t Convert Variables

You can also exclude:

  • All (Only display the official syntax)
  • -o
  • -ms
  • -moz

Here’s a little before and after snippet snapshot:

Before

/* 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);  
}

After

/* Try it out. Click the Prefixize button. */
.box {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity: .5;
}

.container {
    -webkit-box-shadow: 20px;
    -moz-box-shadow: 20px;
    box-shadow: 20px;

    -webkit-transition: -webkit-box-shadow 2s;
    -moz-transition: -moz-box-shadow 2s;
    -o-transition: box-shadow 2s;
    -ms-transition: box-shadow 2s;
    transition: box-shadow 2s;

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

    -webkit-animation: slide 1s alternate;
    -moz-animation: slide 1s alternate;
    -ms-animation: slide 1s alternate;
    animation: slide 1s alternate;

    background: -webkit-linear-gradient(top, #e3e3e3 10%, white);
    background: -moz-linear-gradient(top, #e3e3e3 10%, white);
    background: -o-linear-gradient(top, #e3e3e3 10%, white);
    background: -ms-linear-gradient(top, #e3e3e3 10%, white);
    background: linear-gradient(top, #e3e3e3 10%, white);
    display: -webkit-box;
    display: -moz-box;
    display: box;
}

@keyframes "slide" {
 0% {
    left: 0;
    -webkit-box-shadow: 10px 10px 10px black;
    -moz-box-shadow: 10px 10px 10px black;
    box-shadow: 10px 10px 10px black;
 }
 100% {
    left: 50px;
    -webkit-box-shadow: 5px 5px 5px black;
    -moz-box-shadow: 5px 5px 5px black;
    box-shadow: 5px 5px 5px black;
 }

}

@-moz-keyframes slide {
 0% {
   left: 0;
   -moz-box-shadow: 10px 10px 10px black;
   box-shadow: 10px 10px 10px black;
 }
 100% {
   left: 50px;
   -moz-box-shadow: 5px 5px 5px black;
   box-shadow: 5px 5px 5px black;
 }

}

@-webkit-keyframes "slide" {
 0% {
   left: 0;
   -webkit-box-shadow: 10px 10px 10px black;
   box-shadow: 10px 10px 10px black;
 }
 100% {
   left: 50px;
   -webkit-box-shadow: 5px 5px 5px black;
   box-shadow: 5px 5px 5px black;
 }

}

@-ms-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. */
.content {
    background: red;
}

Cool, right!?!

Give Prefixr a try.

8 SHARES

Eric Dye

I am a blogger, business owner and lover of coffee. I spend most of my time as writer and editor for ChurchMag, but you can also find me working on Live Theme and ChurchMag Press. All while enjoying my family and sipping espresso in Italy.

We have 2 comments...
Now let's hear from you!

  1. says

    I have a couple of wordpress theme ideas, but all the cross-browser stuff *cough* IE *cough* is keeping me from releasing what I’ve made. It looks fine on Safari, Chrome, & Firefox, but I don’t want to search for all the possible problems and hack around them. I wonder if this will help.

    Paul

What would you like to say?

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>