Done Well

Notes from a Software Craftsman

CSS Vendor Prefixes

A quick note on using vendor-specific properties: when doing so it is generally a good idea to include the non-prefixed property as well, after all of the prefixed versions.

This will ensure that when the time comes and the browser supports the property entirely it will be used. It will also override the prefixed version when that time comes.

An example with border radius:

1
2
3
4
5
.myClass {
  -moz-border-radius : 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
}

Or even better using a pre-compilation tool like Compass you can just do something like:

1
2
3
.myClass {
  @include border-radius(4px);
}

And based on how you have configured the supported browsers it will take care of emitting the vendor specific properties.