Aaron Gustafson - AdvancED DOM Scripting: Dynamic Web Design Techniques

Extensible HyperText Markup Language (XHTML), Cascading Style Sheets (CSS), and Document Object Model (DOM) scripting using JavaScript are the big three of web design. XHTML provides the semantic meaning in your document structure; CSS provides the positioning and style for your document layout; and DOM Scripting enhances your document's behavior and interaction. Did you catch that? I said DOM scripting enhances , not provides , your document's behavior and interaction. The difference between "enhances" and "provides" is an important distinction. We've all learned about XHTML, semantics, and validating our documents so they conform to the W3C specifications, and we all use CSS to properly style our semantically marked up XHTML strict documents (you do, don't you?), but DOM scripting, the third piece, the one that makes things extra slick and gives your web applications extra flare, can be an obtrusive beast.

DOM scripting relies on JavaScript. If you search for "Unobtrusive JavaScript" on the Web, you'll find a flood of different descriptions, but that's only because unobtrusiveness needs to be considered everywhere. It's not a Band-Aid you can just throw onto your code to make it all good. There's no unobtrusive object in JavaScript (Hmm... maybe there could be?), and you can't download some "unobtrusive" library to fix your code. Unobtrusiveness is only possible with proper planning and preparation in your web application. It must be considered when interacting with both the user and the web developer. Your scripts must be unobtrusive to the user and avoid unnecessary flashy and annoying features (something that gave JavaScript a bad rap in the past). Scripts must also be unobtrusive to allow the page and markup to continue to work, though maybe not as elegantly, without JavaScript. Finally, they must be unobtrusive and easy to implement within your markup, using ID and class hooks to attach behavior and provide a separation of the script from the markup. To better understand unobtrusiveness, and the integration of DOM scripting, XHTML, and CSS, you need to consider the outcomes in the situation we looked at previously and understand the basic principles and their application to your code.

Two methodologies you often hear about with unobtrusiveness are "progressive enhancement" and "graceful degradation." Browsers that lack certain features should receive an equally informational, yet altered, view of the same document by using techniques that either enhance the document as technologies are available (progressive enhancement) or degrade the document when they are missing (graceful degradation). These two concepts are often used interchangeably, but each embraces the idea that not all browsers are created equaland not all browsers should be treated equally. Also, you shouldn't force a low quality service on everyone just to be able to cater to the lowest common denominator.

One of my favorite quotes about the necessity of progressive enhancement comes from Nate Koechley of Yahoo, who sums it up when describing browser support (http://developer.yahoo.com/yui/articles/gbs/gbs.html):

"Support does not mean that everybody gets the same thing. Expecting two users using different browser software to have the identical experience fails to embrace or acknowledge the heterogeneous essence of the Web. In fact, requiring the same experience for all users creates a barrier to participation. Availability and accessibility of content should be our key priority."

If you're using JavaScript in a way that inhibits the "availability and accessibility of content," you're doing something wrong.

At the same time, progressive enhancement doesn't necessarily mean an all-or-nothing approach to JavaScript. The problem is that, unlike most programming or scripting languages that you would run on your own dedicated servers or computers, JavaScript is an interpreted language that runs within a web browser, so you won't have any control over the wide variety and mix of software, hardware, and operating systems your script will need to handle. To deal with the infinite combinations, you have to be careful and create behavioral enhancements based on the capabilities of the browser and the available technologies, which could mean providing a degraded solution that still relies on lesser parts of JavaScript or a solution that falls back on traditional, JavaScript-free methods.

I'll be stressing these ideas of unobtrusiveness, degradability, and progressive enhancement throughout the book, but I'll also say that I am by no means a zealot. I do realize that your sites do need to support browsers without standards-compliant features. In many cases, proprietary methods will also be required, but the trick is to go for the standards-compliant way and only fall back on the proprietary way if necessary.

When working with DOM scripts and integrating them into your site, you should always write scripts that are

These guiding principles overlap in practice, and they all go hand in hand; keeping them in the front of your mind will go a long way to reducing headaches now and down the road. In fact, I suggest posting them on a big, bold sign next to your computer, so you can drill them into your head. I'll even provide you with a printable sign at