Stop writing CSS prefixes

by danillo on Mon, 28/05/2012 - 12:10

While vendor prefixes are a subject of constant discussion, the developers don't want to wait and are using it more and more. But due to their draft nature, prefixes changes so much that is very hard to keep track of them all.

“Border radius needs a prefix for Webkit... Maybe... And for Firefox? I know that don't need for Opera... I mean, well, is better to test it... I wonder if works with IE? AHHHHHH!!!!”
You're not alone.

That's what Prefix free comes for.

With a 2KB JavaScript, Prefix free aims to change the way you write CSS, avoinding writing prefixes and letting the script do the magic. What before you write as:

.classe {
  -moz-border-radius: 5px 0 5px 0; /* Firefox */
  -o-border-radius: 5px 0 5px 0; /* Don't know if I need this */
  -webkit-border-radius: 5px 0 5px 0; /* Old Chrome? */
  border-radius: 5px 0 5px 0; /* sigh... */
}

Now you can write as:

.classe {
  border-radius: 5px 0 5px 0; /* Fuck yeah! */
}

Behind the scenes, Prefix free parses your CSS and check if there's properties that needs prefixes to work, and add them. As advantage, in addition to a cleaner code, you have the guarantee that your styles will work in the future, if a browser start to support a new experimental property.

For example, in the code above, if Microsoft implements -ms-border-radius, Prefix free will make sure it will works, which won't happen with hand-written prefixes code.

As soon as I realize that there's no Drupal module for that, I just made one, and here's the Prefix free module, which basically wraps the script into a Drupal library, and add it in your entire site.

To use it, just download the Prefix free javascript and put it into the module's folder, or in the libraries directory if you are using Libraries API, and it will works automagically. Then, just forgot about CSS prefixes.

Comments

Rather than using yet another javascript library to do on-the-fly CSS manipulations, I think using a CSS pre-processor (such as LESS or SASS) and a mixin is a much cleaner solution. Create a 'border radius' mixin with whatever (prefixed or not) rules you need and re-use it with a single line of code. No JavaScript necessary, and no reliance on a third-party library to keep up to date.

Yuriy, I had the same opinion some time ago. But Lea Verou from -prefix-free has a good point. Here is what she said on an interview at CSS Tricks about server side preprocessors like Less and SASS.

"What -prefix-free exactly does, is impossible to do in the server. -prefix-free detects which features need a prefix and only adds it if needed. Also, it automatically detects which properties are available that need a prefix. It doesn't have to keep lists of which prefixes to add for which features, everything gets feature detected, and thus is very future proof. With preprocessors, lists need to be maintained about this sort of stuff. Such lists are doomed to be incomplete and quickly get out of date. Every server-side prefixer I ever tried fails in a number of cases.

For example, think about CSS animations. In the beginning, it was only Webkit. Then Firefox implemented them, and we had to go back and add -moz- versions too. Now IE has just implemented them too, so everything has to change and include a -ms- prefix as well. Soon, Opera will implement CSS animations. Are we really going to go back for a third time and add @-o-keyframes? Probably not. Most people will just start making up excuses about how Opera's market share is low and how they don't need to bother. -prefix-free is great for cases like that, because you never need to go back and change anything. When Opera implements CSS animations, they will work fine in Opera too, without even -prefix-free requiring an update."