There’s a new article up at A List Apart called Let Them Eat Cake. It’s all about using JavaScript, or more accurately the Document Object Model, to hide and show content on demand.
The example given goes a little far in that it basically replicates the browser functionality but this technique can be very, very effective when you have a lot of content but you don’t want to overwhelm the user. I’ve used a similar technique for the tabbed interface over at The Session for years and I also tried it on the website for IN Partnership.
The nice thing about this technique is that it’s completely backwards compatible. By using internal links, browsers without JavaScript still have access to everything in the document. The DOM trickery adds an extra level of usability but because the document is well-structured to begin with, the content is accessible with or without JavaScript.
Sound familiar? Substitute “CSS” for “JavaScript”. It’s basically the same philosophy.
Over at Digital Web there’s an article that goes into this in more detail: Separating behavior and structure. It’s written by Peter-Paul Koch who has written some real nonsense in his time, but he’s right on the money with his approach to the DOM:
“I propose to separate behavior and structure. Right here, right now.
I call upon all Web developers to stop writing JavaScript instructions in XHTML files.”
The idea of separating content, presentation and behaviour isn’t a new one for programmers. Yet it’s only now that we’re seeing a real movement to apply this to (X)HTML documents. Why so late?
Speaking as someone who dived into DHTML way back when, I know that a lot of us developers got our fingers burnt. It was the height of the browser wars and every browser manufacturer seemed to have its own DOM. Doing the simplest thing involved writing ridiculously convuluted wrappers to make things work in all browsers.
Fast forward to today. The DOM has been standardised and that standard is firmly entrenched in all the major browsers.
DHTML is back.