Remember non-vendor-prefixed CSS 3 properties (and put them last)

Everybody wants to use CSS 3 now that even Internet Explorer will support parts of it once IE 9 is out. But since parts of CSS 3 are still subject to change, most browsers use a vendor prefix for many CSS 3 properties to signal that their implemenation is “experimental” and may change in a later version of the browser.

This means that for a property like border-radius to work cross-browser you need to specify it several times with different vendor prefixes, like this:

.box {
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;
}

The -moz- prefix targets Firefox and other Gecko-based browsers, -webkit- is for older versions of Safari and other WebKit-based browsers, and the non-prefixed border-radius property is currently used by Safari 5, Chrome, Opera 10.5, and IE 9.

0 comments: