CSS3 and JavaScript used to be two wholly different beasts. CSS was strictly limited to controlling the style of your content, while JavaScript enabled us to control some behavioural elements on the page. But now we’ve got CSS3, which is this crazy, exciting thing that enables you to easily add rounded corners and text-shadows to your page’s bag o’ tricks.
CSS3 puts much more power in your hands and has added some features that move it from ‘styling’ into the behaviour layer, which has ruffled some feathers. Many people strongly believe that CSS should only control aesthetic styles, while others argue that behavioural interactions can fall under the umbrella of a site’s ‘style’. I’m still on the fence, but I’d like to discuss some advantages and disadvantages of both in respect to this area where they overlap: the behaviour layer. So let’s go for it.
Ease of use
JavaScript isn’t a cakewalk for most non-technical folks. Libraries help, but a solid understanding of the JavaScript language is a necessity to accomplish much more than just out-of-the-box methods. CSS3 animations and transitions are remarkably simple to implement and there’s not much to mess up. Just a few short lines of easily understandable CSS and you’re up and running. Enough said.
WINNER: CSS3
Extensibility
While it might take a bit of understanding to extend beyond the out-of-the-box methods, with JavaScript there really is no box. JavaScript allows control over nearly everything in the DOM. It’s a pretty handy tool chest. CSS3, in contrast, is more like a tool belt. The potential for extensibility ends at what’s laid out in the spec, but ultimately we’re limited by what browser vendors are willing to support, which brings us to our next area...
WINNER: JavaScript
Support
Support for animations in JavaScript libraries is widespread, often providing support even for our old friend IE6. CSS3 transitions are anything but widespread. WebKit has been leading the charge, which means we have support in Chrome and Safari. The imminent release of Firefox 4 will also have support for transitions and animations.
WINNER: JavaScript
Browser performance has improved heaps recently and much of the attention has been on JavaScript engines. They even have branded names. WebKit has SquirrelFish (except where Chrome has replaced it with V8). Mozilla has TraceMonkey. The IE9 Beta even comes with a new JavaScript engine called Chakra. On modern browsers, JavaScript screams.
CSS3 support for animations and transitions is still fairly new. As a result, it doesn’t have the benefit of years of tweaking and fine-tuning its performance. For example, neutroncreations.com/blog has a fun, fairly simple atom nucleus with two electrons orbiting it. In Chrome they eat up about 40 per cent of my CPU. The jQuery Circulate Plugin site has several similar animations and only consumes about 18 per cent. Not the most scientific of experiments, but certainly a worthwhile comparison.
WINNER: JavaScript
Conclusions
Ultimately it’s not either/or. It’s both/and. JavaScript isn’t going anywhere. And CSS3 is a really useful toolbelt. But the right answer is always about what your client or users need. Are all your valued users on modern browsers? Is this feature something that everyone will need to use? Or is it more of an Easter egg? “Congrats, you’re using WebKit!” Most CSS3 animations I’ve seen have fallen into the fun category, while developers are still relying on JavaScript libraries to do the heavy lifting. Whatever you choose, just be sure not to leave out anyone important and have some fun while doing it.
