HTML5では、これまでには HTML4 や XHTML では規定されていなかった新たな要素が追加されています。Firefox 2.0、Opera 9、Safari 3 では、未知の要素に対して CSS ルールを記述したとしても有効になりますが、Internet Explorer では無視されてしまいます。

もし将来的に HTML5 でサイトを構築するような時が来たら、少なくとも現在リリースされている Internet Explorer6, 7 対策に苦慮しそうです。

ところが、なんと、すでに、Mozilla Corporation の JavaScript エバンジェリストであるジョン・レシグ（John Resig）氏のブログ記事『HTML5 Shiv』で、HTML5 の新要素に対して CSS を適用させるテクニックが紹介されています。

簡単にまとめると、次のような感じです。

CSS：

figure { border: 1px inset #AAA; padding: 4px; }

HTML：

<figure>・・・</figure>

上記のように、HTML5 の新要素 figure に対して CSS ルールを適用したい場合、次のような JavaScript コードを実行すれば、Internet Explorer でも、figure 要素に対して CSS ルールを適用することができます。

JavaScript：

document.createElement("figure");

ただ単に、DOM メソッド createElement() で figure 要素を生成するだけです。appendChild() を呼び出す必要もありません。

これですべて解決するわけではないでしょうが、もしHTML5でサイトを制作するような時代になった時には、役に立つのテクニックになるのかもしれませんね。