Gadgetopia

…it’s all about layers.

A List Apart has put out two great new articles on the use of JavaScript in web design.

In ‘JavaScript Triggers’, Peter-Paul Koch (of Quirksmode fame) makes an interesting point: There are 3 big layers to an HTML page: structure, appearance, and behavior. CSS is great because it separates structure from appearance, but how can we use JavaScript without mixing the behavior with the structure?

We should separate behavior and structure by discarding inline event handlers like onmouseover=”switchImages(‘fearful’,6,false)”. Instead, as with CSS, we should use triggers to tell the script where to deploy the behavior.

Great stuff. He advocates the use of your own custom attributes on elements to drive script behavior (eg >input type=”text” required=”true” inputtype=”phonenumber” <). This is one of my favorite tricks as well, but the major drawback is that your page will no longer validate, because there’s no such attribute as ‘required’ or ‘inputtype’ in the HTML spec.

My solution to that problem has always been ‘ignore the errors’, but J. David Eisenberg wrote a companion article on how to create your own custom DTD that includes the new fields. This seems a bit like overkill, but if you have a standard javascript library that makes use of a fixed set of custom attributes, and you use it over and over, a custom DTD could come in handy when you’re making sure your site still validates.

A List Apart is a very low-volume site, but whenever they publish something, it’s always well worth the read.