CSS: how to forget about prefixes

Tweet

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.