ブログ内検索

by Futomi Hatano

HTML5の新要素にCSSを適用するテクニック

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でサイトを制作するような時代になった時には、役に立つのテクニックになるのかもしれませんね。

この投稿は 2008年1月25日 金曜日 12:11 PM に マークアップ カテゴリーに公開されました。 この投稿へのコメントは RSS 2.0 フィードで購読することができます。 現在コメント、トラックバックともに受け付けておりません。

コメントは受け付けていません。