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 {<br>&nbsp; -moz-border-radius: 5px 0 5px 0; /* Firefox */<br>&nbsp; -o-border-radius: 5px 0 5px 0; /* Don't know if I need this */<br>&nbsp; -webkit-border-radius: 5px 0 5px 0; /* Old Chrome? */<br>&nbsp; border-radius: 5px 0 5px 0; /* sigh... */<br>}

Now you can write as:

.classe {<br>&nbsp; border-radius: 5px 0 5px 0; /* Fuck yeah! */<br>}

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.

drupal planetcssvendor prefixesprefixesprefix freeprefix-free

• Português