The graceful degradation myth [UPDATE]

Thursday, February 9th, 2006

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.

Sphere: Related Content

Comments closed

2 Comments

Understanding and solving the JavaScript/CSS entanglement phenomenon | ara pehlivanian—Web Standards, Web Culture, Web Everything.™ says:
February 14th, 2007 at 11:39 pm
[...] About a year ago I wrote “The graceful degradation myth” in which I talked about the entanglement phenomenon that occurs when you mix JavaScript functionality with CSS “initial states”. By that I mean, if you’ve got a block of content that is initially hidden via CSS (i.e. display: none;) and is only made visible through JavaScript functionality (like an onclick event), you run the risk of barring access to that hidden content to visitors who don’t have JavaScript running on their browser–if you don’t do it right that is. [...]
Understanding and solving the JavaScript/CSS entanglement phenomenon says:
March 1st, 2007 at 10:24 am
[...] Pehlivanian talked about the graceful degradation myth awhile back, and since then has come up with a simple solution to his [...]

Sorry, the comment form is closed at this time.

ara pehlivanian