Several months ago, the CSS working group discussed the issue of the -webkit prefix monopoly and the fact
that developers usually don't bother adding other prefixes.
As a result, browser vendors considered using -webkit as the only vendor prefix and thus
dropping their own prefixes (ie: -moz, -o, -ms,...).
This suggestion caused an uproar in
Currently, the most popular and preferred method to automatically handle vendor prefixes effortlessly is to work with CSS preprocessors
like SASS, LESS & Stylus.
Yet many Developers don't bother using and/or learning these tools.
You should definitely consider using these tools as they will save you time and hassle.
Dealing with all variants
of implemented CSS3 properties by hand can be a time-consuming, error-prone and repetitve task.
In this post, I'll show you how you can easily and automatically add missing vendor prefixes in you css files
during your build process using ant (or make)
This will ensure that all prefixes are automatically included in your builds.
Our sample project
The sample project we'll be working with is available at
you can also check out the source code if you wish.
This simple web page queries imdb using the imdb api via a JSONP request.
The response is then simply printed on the web page. The CSS stylesheet uses several CSS3 properties such as
box-shadow, border-radius, gradients, transitions,...
We'll use the prefixr api on the command line to add any missing vendor-prefixed property:
This will generate a production release in the build folder with all the vendor prefixes automatically added.
And that's it! You won't need to worry about prefixes anymore when releasing your projects.
You should never have to hand code vendor prefixes ever again, you should always use tools to handle this tedious
task whether you choose to use CSS preprocessors, client-side solutions, or tools like prefixr.