Fast HTML5 and CSS3

2010-06-04 00:00:00 +0100 by Alex R. Young

I've been thinking a lot about hardware acceleration in CSS animations
because of the current theme of Let's Make a
. There is
actually a lot of scope in CSS3 and HTML5 to create animations, and in
some ways you can improve performance over traditional design

In Making an iPad HTML5 App & making it really
Thomas Fuchs discusses techniques he's discovered for creating
turbo-charged apps on Mobile Safari. Most of these techniques are
relevant to other modern browsers.

One point that I like is "Images slow things down immensely -- get rid
of them". Thomas recommends using techniques like gradients for buttons
and backgrounds rather than using images. I've been building buttons in
100% CSS instead of using images lately because I'm a programmer and
writing CSS is easier than messing around with Photoshop. I never really
thought about performance advantages though, I just liked the way the
results looked and how they scale nicely.

Meanwhile, Apple published a great HTML5
, with some interesting uses of
modern CSS and JavaScript. The 360 degrees example and "VR" effects are
particularly impressive -- hopefully this means people can stop using
those awkward QuickTime VR and Flash-based techniques!