HTML5 vs. CSS3 vs...background-image?

HTML5 has superpowers, and CSS3 styles on steroids. And maybe HTML5 really will blow up your world. But what if your job is pretty simple, and maybe doesn't need these newfangled standards?

The fact is, plenty of tools are too powerful for the job. Sometimes building for the distant future takes too long -- though figuring out how to juggle the short and the long terms can get tricky.

So while there's no question that Canvas and CSS3 can do anything CSS 2.1 can, the question is -- do the newer technologies always do it better?

Not always, says Jef Vlamings.

His test-case? Slightly odd-shaped navigation tabs -- rounded rectangles, with a triangular left edge.

Jef first found himself seduced by CSS3's siren-song, and tried ten lines of CSS3 -- which almost worked, but left the left (triangular) border incomplete.

Then he tried HTML5 Canvas -- which worked beautifully, but took 40 lines to write.

Finally, he just clipped from a Photoshop prototype and used an old-fashioned background-image, and it worked perfectly in every browser.

The lesson, Jef declares, is this:

Sometimes you neglect the easiest things when you are getting too ambitious. New technologies are invented for a reason and if you don’t have a clear understanding of that reason, you end up making it yourself too complicated. Lately, the use of CSS3 and HTML5 is booming in the web design sector. For almost each task, designers find some way or another to implement CSS3 or HTML5 because it’s the latest thing. Sometimes it’s overlooked that older proven techniques are just better for the job than the new fancy stuff.

Pretty zen, I'd say, but that's a nice thing for CSS to be.

Check out the full discussion, which includes screenshots of the results reached by each approach.