A conversation over the proverbial water-cooler recently between myself and a DSI architect about the various agonies and ecstacies of CSS, Javascript and DOM manipulation led him to express surprise that a web designer from a creative background (me!) would be involved in such designer-unfriendly things as Javascript development. Funnily enough, I was thinking the same about him viz stylesheets!

In truth, CSS, Javascript and DHTML inhabit a fuzzy area between web design and presentation layer development/architecture (that fuzzy area just happens to be where I currently work). And while not all designers or developers need to make use of them all to the same extent, they are powerful and usable ways of presenting and manipulating HTML content, not to mention adhering to current W3C web standards.

HTML as we all know has a static presentation model. The browser parses, interprets and displays the marked-up content served to it. Which just sits there, looking pretty (or not). As the complexity of this beautifully simple idea developed sometime late last century, the infamous “tag soup” became more and more common – a well-nigh impenetrable bunch of structural and style tags including nested tables commonly (ab)used to control images and structure, and later, javascript to respond to user events – oh, what a tangled web we wove (to paraphrase this chap)!

In fact the rise of CSS is finally leading us in the opposite direction – back to simple mark-up, despite the increasing complexity of the contemporary webblication. Stylesheets allow us to separate structure from content in much the same way as ye olde HTML did, BUT with maximum control over the styling – so a simple collection of basic HTML and Div tags can be positioned and styled from a central stylesheet external to the served page e.g. www.decare.com.

DHTML allows a further level of control and user interactivity: Javascript, using the modern browser’s Document Object Model, can respond to user events to manipulate content – everything from simple image swaps on mouseover (don’t laugh, techno-kids, this is the primary feature that led to the universal browser take-up of Javascript during the Netscape/Microsoft browser wars!) to dynamically adding/removing objects, complex data filtering, etc. – all on the client side. Almost any HTML element can be both styled and positioned by CSS and manipulated as an object dynamically by Javascript, especially easily using the ID attribute to directly “capture” it without having to know its position in the object hierarchy.

In DSI we have used DHTML even more intensively in JSP Intranet apps, with Microsoft’s HTML Components concept allowing the even more modular use of client-side scripting – the .htc file contains javascript which can dynamically attach behaviours such as column sorting and the like to screen elements, and, uniquely, can be attached via style classes and IDs via the non-standard behaviour:(url) style attribute in the CSS. Of course this is only possible in a browser-controlled environment, but demonstrates the power of DHTML to approach the feature-rich functionality of FAT client software.    

The web may still be tangled, but adhering to standards and using good scripting practices may help us to negotiate a well-styled and usable route through it.

- Alan Murphy