Been doing some playing around in the world of HTML5, and I have to say I like it.

The biggest problem with it seems to be the near-total lack of support from IE. I suppose in some part this stems from politics; after all, Google is the biggest supporter of HTML5, and the Apple and Mozilla web teams have been working on it for quite some time. MS hates to be seen as playing catch-up. Still, this lack of support is irritating.

But there’s a way to add some level of HTML5 support to IE, at least for the simple new tags from HTML5, and that’s with John Resig’s HTML5 Shiv.

Yet that only works if javascript is enabled. What if it isn’t?

If javascript isn’t enabled in IE, you can still get some styling on the page. In the same conditional comment that included the shiv, add a <noscript> block which encloses a separate stylesheet link, with whatever additional resources you might need to make this happen.

You see, IE just pretends the new elements don’t exist, and that’s the problem. They are blank nodes in the DOM tree, and the “official” parent of their children is the parent element of the HTML5 element. IE will see and apply only style rules that don’t contain the new elements. For example, not only will IE refuse to apply this style:
header { font-weight: bolder; }
but also:
header h1 { font-size: 125%, font-weight: bold; }

The way to compensate for this is to create alternate style rules, served only to IE without javascript, that will achieve some level of the current design. The odds are you won’t be able to recreate the precise design that way, but you still owe it to those customers who choose to visit using IE without javascript to deliver a pleasantly styled experience.

So you create a “low fidelity” version of the design which can be served to those clients. In later design iterations, you will probably find this low-fi version of the styles to be useful for other clients, so the stylesheet shouldn’t be labeled as “IE” but rather as “LoFi” (maybe it’ll be useful for some cell phones—though many of them “get” HTML5 these days—and some other “special needs” audience members).

So the “IE support block” on your page would look something like:

<!--[if lte IE 8 ]>
<script>
document.createElement("nav");
document.createElement("section");
document.createElement("article");
document.createElement("header");
document.createElement("footer");
document.createElement("aside");
</script>
<noscript >
<link rel="stylesheet" href="lowfi.css" >
</noscript>
<![endif]-->