File Under: CSS

W3C Gives Its Blessing to Prefix-Free CSS Animations

Sisyphus

The W3C’s CSS Working Group, the group charged with creating the CSS standard, has given browser makers the go-ahead to remove the prefixes from CSS 3 Transforms, Transitions and Animations.

CSS vendor prefixes were designed to help web developers by giving them a way to target CSS to specific browsers and use proposed standards before they were finalized. By prefixing properties developers can target any quirks in specific browsers until the standard is finalized. Unfortunately that’s not always what has ended up happening. Vendor prefixes have come under considerable fire recently, with Opera going so far as to implement other browsers’ prefixes.

That’s why the announcement that three more properties are ready to go prefix-free is good news for web developers. Obviously it’s a bit early to get rid of your transition and animation prefixes, but look for coming updates from browser makers to do away with the need for prefixes like -moz, -webkit, -o and -ms when using Transforms, Transitions and Animations. In fact the latest preview release of Internet Explorer 10 already supports the unprefixed versions.

The IEBlog recently posted a nice overview of all the new prefix-free CSS properties in IE 10.

Unfortunately, as is often the case in web development, using the prefix-free version of CSS rules is not a simple as it should be. Even those who followed the best practice of including an unprefixed version of CSS rules after the prefixed declarations may, in some cases, need to tweak their code a bit.

Consider for example the syntax of CSS gradients. The prefixed gradient syntax supported by today’s browsers is in fact based on a now obsolete draft version of the gradient specification. The earlier syntax is incompatible with the current Candidate Recommendation version of the spec. That means if you wrote out the unprefixed rule on a site two years ago, using the correct syntax for the time, your unprefixed code won’t work when gradient prefixes are removed (as they have been in IE 10). Fortunately, gradients are something of an anomaly and most of the time you won’t need to change too much. With the Transforms, Transitions and Animations you shouldn’t need to change anything at all.

Either way, browser makers will likely need to continue supporting the prefixed versions of CSS rules even after the W3C declares the non-prefixed versions ready for prime time.