CSS properties and prefixes

Let’s take border-radius as an example. It has very wide support:

  • Firefox 1-3.6 with -moz
  • Safari 3-4, Chrome 4, iOS 3.2, and Android 2.1 with -webkit
  • Opera never requires a prefix for border-radius, but has implemented it for several versions now.

If you are in doubt what browsers support and need a prefix, caniuse.com is a great resource for that.

Be sure to place the prefixed versions of a property before a non-prefixed. This will allow the cascade to take effect for newer browsers as they remove the prefix while retaining it for older browsers that still need it. Generally best to put them in alphabetical order (just like you’re doing with your properties) in order to more easily verify you have captured the ones you want.

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

Below is a list of prefixes and their browsers:

  • -apple: Webkit (All webkit understand these and they match webkit prefixes; don’t use these)
  • -epub: Webkit
  • -khtml: Konqueror (Webkit precursor, Konqueror available on Linux, vary rarely need this because they often go the Opera route and rarely release with vendor prefixes)
  • -moz: Gecko-based engines (Firefox, Mozilla, Camino)
  • -ms: Trident (IE8+)
  • -o: Presto (Opera)
  • -webkit: Webkit (Safari, Chrome, Android, iOS)
  • -wap: WAP-based browsers (only Opera from what I can tell)
  • -xv: Presto (Opera, specifically XHTML+Voice Profile)

Update: I support alphabetizing the prefixes. Now that browsers like Opera and Mozilla have announced plans to apply -webkit prefixes, it’s recommended to put that prefix first, followed by the others. This will insure that you get the browser-specific implementation and not the webkit one.