HTML5 Shiv

Assuming that it’ll be a while before most browsers attempt to implement most of HTML 5 (a perfectly reasonable assumption) we need to start thinking of ways to tackle the creation and rendering of HTML 5 components in the meantime. Obviously, using the tools of JavaScript and CSS we can accomplish a lot.

However, there is one notch in our weapon: Internet Explorer doesn’t know how to render CSS on elements that it doesn’t recognize. For example, the following “blah” element (a fictional element) doesn’t have any styling:

<html>
<head>
<style>blah { color: red; }</style>
</head>
<body>
<blah>Hello!</blah>
</body>
</html>

Result:

Thankfully, Sjoerd Visscher mentioned an interesting technique that could be used to force IE to use the specified CSS styling. Specifically, once you create a new DOM element (of the same name as the one in the document) all styling is applied. You don’t even have to inject the element in order for this to occur. Observe the following:

<html>
<head>
<style>blah { color: red; }</style>
<script>document.createElement("blah")</script>
</head>
<body>
<blah>Hello!</blah>
</body>
</html>

Result:

This is very important. This now means that we can provide CSS styling for undefined HTML 5 element and allow Internet Explorer to handle it gracefully.

<figure/> element

Let’s take a look at a simple example. Pretending that we wanted to set about implementing the HTML 5 figure element. The element is quite simple, only requiring some basic CSS markup (I’m not completely sure how a figure is supposed to look so I took some liberties here).

<html>
<head>
<style>
  figure { border: 1px inset #AAA; padding: 4px; }
</style>
<script>document.createElement("figure");</script>
</head>
<body>
<figure>
  <img src="https://johnresig.com/files/jeresig-wordpress-sm.jpg"/>
</figure>
</body>
</html>

Result:

Using some basic CSS, and a single JavaScript DOM statement, we’ve now implemented at least part of the HTML 5 spec. While it won’t solve everything, it is a promising technique, at the very least.

I did have some issues when I was testing this technique, especially with the styling of elements that are already defined elsewhere in the structure. For example, let’s say you wanted to implement the legend child element of a caption. This ends up being really hard since the functionality and styling of legends are already defined for fieldsets by Internet Explorer. In my simple tests they became unstylable outside the context of a fieldset.

This is definitely a decent start, building our HTML 5 shiv, but it needs some more work and much more exploration. I hope to see this continued in the upcoming months as interest in, and availability of, HTML 5 begins to heat up.

Posted: January 24th, 2008

Subscribe for email updates

21 Comments (Show Comments)


Comments are closed.
Comments are automatically turned off two weeks after the original post. If you have a question concerning the content of this post, please feel free to contact me.

Secrets of the JavaScript Ninja

Secrets of the JS Ninja

Secret techniques of top JavaScript programmers. Published by Manning.

Subscribe for email updates

John Resig Twitter Updates

@jeresig / Mastodon

Infrequent, short, updates and links.