Lose the CSS3 vendor prefixes

I love CSS3. Being able to jump straight in to code and design interface elements & components that scale across different device resolutions is fantastic. Not to mention the increased speed & performance from reducing HTTP requests for background images. But since most of the CSS3 features are considered experimental, they’re interpreted slightly differently by the different browser vendors. So most features require these nasty little prefixes to get them working in a specific browser, like -webkit-linear-gradient(...).

To be frank, I hate vendor prefixes; they’re almost a deterrent to implementation. And that’s why I love -prefix-free, a plugin created by Lea Verou to break you out of the CSS vendor prefix hell. Prefix free allows you to just use the unprefixed properties in your CSS, and the plugin takes care of all the browser wrangling for you. The implementation is dead simple (just include prefixfree.js anywhere on your page) and it’s supported on all modern browsers that support CSS3, including mobile Safari, Android and others.

So if you hate writing CSS3 like this…

div{
    background: #000;
    background-image: -webkit-gradient(linear, 0% 15%, 0% 100%, from(#FFF), to(#000));
    background-image: -webkit-linear-gradient(top, #FFF, #000);
    background-image: -moz-linear-gradient(top, #FFF, #000);
    background-image: -ms-linear-gradient(top, #FFF, #000);
    background-image: -o-linear-gradient(top, #FFF, #000);
    background-image: linear-gradient(to bottom, #FFF, #000);
}
</code>
</pre>

…and want to write CSS3 like this…



div{
    background: #000;
    background-image: linear-gradient(to bottom, #FFF, #000);
}
</code>
</pre>

…check out Prefix free!

http://leaverou.github.com/prefixfree/

Original blog post: http://www.uifuel.com/lose-the-css3-vendor-prefixes/