IE9, vendor prefixes and future-proofing your CSS

/43

The public beta of IE9 comes out in a few days, so this is a good time to check the lovely CSS3 transforms, border-radii and box-shadows you’ve added to your CSS files are future-proof.

Browsers like Firefox and Safari require the prefix -moz- and -webkit-. IE uses the prefix -ms-, but in a post they published in March, they stressed the following with regards to border-radius:

As CSS3 Backgrounds & Borders has reached Candidate Recommendation, the property name is not prefixed with -ms.

They also made this comment:

“While a number of web pages already make use of this feature, some do not render properly in IE9 or Opera 10.50 because they lack an unprefixed declaration of the border-radius property. As the specification nears Recommendation and browser vendors are working on their final implementations and testcases for submission to the W3C, we recommend that new content always include a border-radius declaration without vendor prefix.”

So make sure every time you use a vendor prefix, you include the non-vendor prefix version for best practice like so:

div {
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    -o-border-radius: 1em;
    border-radius: 1em;
    }

Browsers still reliant on the vendor prefix will ignore the non-prefixed border-radius, but make sure you declare it at the bottom of the list so they listen to this style in the future

There’s a good post on quirksmode.org that makes this point and also delves into the vendor prefix debate.