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.

Sidenote: Vendor-specific extensions are invalid CSS, so don’t be surprised when you get a bunch of validation errors even if you tell the CSS validator to validate your CSS against CSS level 3. Yes, it makes finding any real errors pretty time consuming if you use a lot of vendor extensions.

I’ve seen some cases where a developer has used properties like border-radius without including the non-prefixed property. In the above example, this would have left Opera 10.5 and IE 9 without rounded corners since they don’t support the -moz-border-radius or -webkit-border-radius. So always include the standard, non-prefixed property as well to be nice to future browsers that implement it. This is all provided that a standard version of the property exists and can be considered stable, which is often connected to at least one browser supporting the non-prefixed property.

Another thing to think about when you do include the non-prefixed property is to put it after the vendor-prefixed versions. When a browser implements the standard version of a property, as specified in the relevant CSS3 specification, you most likely want it to use that implementation instead of the experimental, browser-specific version (which it will likely still support to be backwards-compatible). Putting it last should ensure that it will override the vendor-prefixed implementation.

So—when using CSS 3 properties always include the standard, non vendor-prefixed property and put it after any vendor-specific versions in your CSS rules.

This post is a Quick Tip. Background info is available in Quick Tips for web developers and web designers.

Posted on September 2, 2010 in CSS, Browsers