Update: Read the latest developments on this subject here: “Understanding and solving the JavaScript/CSS entanglement phenomenon“
Building pages with HTML for structure, CSS for presentation and JavaScript for behaviour is the way to go. As far as I’m concerned it’s the only way to build web pages. But be warned, every layer brings with it an added level of complexity. Not only in what each technology can do, but in how they interact with each other. Case in point, you build a page with multiple states—say a tab driven box—and hide every one of them except the first via CSS. You then use DOM scripting (JavaScript) to show/hide the other states. So in other words, when one of the tabs are clicked, the corresponding content for that tab appears. Wonderful, but there’s a catch. We all know that “graceful degradation” means that you’ll be able to see all of those states if you don’t have CSS. But what if you don’t have JavaScript? By hiding the other states via a CSS instruction and then tying their appearance to a JavaScript function, you’ve essentially limited the graceful degradation of your page to only those who have JavaScript. Those without will never see the other states since they’re hidden by default.
The workaround of course is messy at best. You could either load a separate stylesheet with the rules for the hidden states via JavaScript or even assign the class names and/or style rules directly via the DOM but both of these methods require a) code and b) the use of the onload event. The problem with the onload event is that for pages with a lot of content, you’ll see a flicker. In other words, the content will load up and then all but the first state will be hidden right before the visitor’s eyes. Not the ideal situation. The alternative of course is to mess up your <body>with <script> tags which goes against the Web Standards ethos of separation of structure, presentation and behaviour.
So what are we left with? I call it a myth. Because though it may sound really nice to say that Web Standards allows for graceful degradation, the reality is that as soon as you get into anything more complex than a simple page, you’re liable to get into trouble.
–30–
Read more from the archive.