Using JavaScript for Presentation

My latest article, Rounded Corners with CSS and JavaScript, has just been published. It goes over various methods for achieving rounded corners, including an old-school table hack, two CSS methods and a new technique that uses JavaScript to modify the DOM and provide extra CSS hooks.

This kind of presentational JavaScript is something that hasn’t seen much discussion yet. Since JavaScript can make arbitrary modifications to a document’s structure after the fact, all manner of presentational tweaks can be achieved. The obvious question is whether or not this is a good idea; after all, JavaScript is traditionally used to add behaviour to web documents with CSS used for the presentational aspects. The problem is that while CSS is a powerful technology it comes with its own limitations – such as the inability to apply multiple backgrounds to an element as discussed in my article. JavaScript lets us avoid those limitations without having to add extra cruft to the underlying markup.

In my opinion, this kind of presentational JavaScript is fine so long as it doesn’t result in inaccessible content for user agents without JavaScript support. The rounded corners technique is an ideal example: browsers without JavaScript only miss out on a small, non-essential design element and in actual fact are unlikely to even realise that something is missing from the page.

Bobby van der Sluis has been thinking along similar lines.

An aside: I wrote the rounded corners article before I had figured out the details of my addLoadEvent function. I would recommend that over the simple window.onload assignment used in the article.