Quit Writing Prefixes

Don’t stop including prefixes, just quit writing them with the help of Compass.

It’s been a while since I’ve had to write a vendor prefix. That’s because I use Compass and Sass to compile my CSS. Compass, an open-source framework by Chris Eppstein, includes a CSS3 module with lots of useful Sass mixins. Among these mixins are CSS gradients, transitions, box-shadows and more.

By importing the CSS3 module it only takes one line of Sass to generate each prefix for a given declaration.

Here’s an example of the transition mixin:

a, a:visited
  color: blue
  @include transition(color 0.3s ease 0s)

Which compiles to the following CSS:

a, a:visited {
  color: blue;
  -webkit-transition: color 0.3s ease;
  -webkit-transition-delay: 0s;
  -moz-transition: color 0.3s ease 0s;
  -o-transition: color 0.3s ease 0s;
  transition: color 0.3s ease 0s; }

No contest, right? For a list of CSS3 mixins, go to http://compass-style.org/reference/compass/css3/

Other Useful Tools

If Sass isn’t your thing, there are a couple of projects which can eliminate the need to write prefixes without a Ruby dependency.

PrefixFree

PrefixFree, by Lea Verou, is a JavaScript plugin which adds the appropriate vendor prefix on the client-side. I’ve used this plugin, and it works quite nicely.

Prefixr

Paste CSS into Prefixr, generate prefixes, then copy and paste the code back to your style sheet. Straightforward, but cumbersome for frequent updates. However, there are plugins for some IDEs, such as Sublime Prefixr. Prefixr was created by Jeffrey Way.