Wednesday, 18 April 2012

CSS: how to forget about prefixes


Writing CSS stylesheet today can be a nightmare. With the high number of specific browser prefixes, we might end up banging our heads against the wall in the effort of not forgetting how to be sure our code is cross browser compatible.
Just to make things clearer: let's consider the following CSS:
.container {
  -moz-border-radius: 4px 0px 0px 4px;
  -webkit-border-radius: 4px 0px 0px 4px;
  border-radius: 4px 0px 0px 4px;
  -webkit-box-shadow: 0 0 4px #9c9c9c;
  -moz-box-shadow: 0 0 4px #9c9c9c;
  box-shadow: 0 0 4px #9c9c9c;

As you can see, we have 3 rules for the border-radius and 3 for the box-shadow. That is because we need to consider prefixes for mozilla and webkit.
Question: is there a way of avoiding all this? Is it possible to write the above code in a simpler way? Something like:
.container {
  border-radius: 4px 0px 0px 4px;
  box-shadow: 0 0 4px #9c9c9c;
Yes, it is possible with -prefix-free.
"-prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed."
Simple as that!
In order to use the JavaScript, we just need to include the js file in our document (preferably after the stylesheet) and we are done.
If you follow the above link, you will learn everything about -prefix-free.

I hope you've found the above information interesting.


  1. A good resource if you don't need to cater to older browsers or JavaScript-less users.

    "The target browser support is IE9+, Opera 10+, Firefox 3.5+, Safari 4+ and Chrome."

    I'd like to see performance tests with this script too, see how much it slows the page down.

    1. Yeah, I wonder that too! On the site they are not saying anything about performance...


Comments are moderated. I apologize if I don't publish comments immediately.

However, I do answer to all the comments.