サイト内検索

HTML5 を IE や Firefox 2 でも使えるようにする方法

この記事は、html5doctor に掲載されている記事「How to get HTML5 working in IE and Firefox 2」を日本語訳したものです。この記事では、新要素に対応していない IE や Firefox 2 で、新要素を適切にレンダリングさせる方法を分かりやすく解説しています。HTML5 でサイトを作る場合には、必須の知識となります。

一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この本日本語訳には、翻訳上の誤りがある可能性があります。したがって、内容について一切保証をするものではありません。正確さを求める場合には、必ず各記事の原文を参照してください。当方は、この文書によって利用者が被るいかなる損害の責任を負いません。もし誤りなどを見つけたら、当サイトのお問い合わせより連絡いただければ幸いです。

HTML5 を IE や Firefox 2 でも使えるようにする方法

HTML5 は最新かつ最強のテクノロジーといえるだろう。しかし、この新たなセマンティックな要素をネイティブでサポートしないブラウザがいくつかある。<video> 要素のフル・コントロールのように、これら要素がもたらしてくれるセクシーともいえる機能については、しばらく忘れていただき、まずは、要素のレンダリングだけにフォーカスしよう。

問題アリの A 級ブラウザーとは:IE8 およびそれ以前のバージョン, Firefox 2 と Camino 1(これら 2 つのブラウザーは同じレンダリングエンジンを採用しており、そのため、ともに同じ影響を受ける。)

IE は HTML5 要素をスタイルしてくれない

IE は、次で説明しているような Firefox の問題とは違い、IE 自身の問題を抱えている。IE では、要素をスタイルしようとしても、その要素を全く見ることすらできないのだ。

これは、もし、あなたが <aside> を右側にフロートさせたいとしても、IE はまったくその要素にスタイルを適用しようとしない。なぜなら、IE は、その存在すら認識していないからだ。

実際には、正確に言えば、これは、HTML5 以前から私たちが抱えていた問題と同じだ。それは、<abbr> 要素を IE6 でスタイルできないという問題だ。それで、さまざま回避策が考え出されてきた(私たちが HTML5 を認識するために IE に対処する一方、<abbr> 要素に対処しようとしている点も加えてほしい)。

対策

希望はある! 私たちは、IE の鼻先で、これらの要素を JavaScript を使って認識させることができ、スタイルを適用することができるのだ。この修正は IE6 とそれ以前のバージョン(A 級ブラウザー)で効く。

これには、Sjoerd Visscher によって投稿された HTML5 shiv を使えば良い。

この対処は、単に、JavaScript を使って新規に要素を生成するだけのものだ。では、どうぞ。これで、IE でも要素にスタイルを適用できるようになる:

document.createElement('header');

例えば、<time> 要素にイタリック体のスタイルを適用したい場合、このような問題に遭遇する:

<!DOCTYPE html>
<html>
<head>
  <title>Header test</title>
  <style>
  time { font-style: italic; }
  </style>
</head>
<body>
  <time datetime="2009-09-13">my birthday</time>
</body>
</html>

IE に対処を適用する以前では:

IE without HTML5 style

そして、対処すると:

<!DOCTYPE html>
<html>
<head>
  <title>Header test</title>
  <style>
  time { font-style: italic; }
  </style>
  <script>document.createElement('time');</script>
</head>
<body>
  <time datetime="2009-09-13">my birthday</time>
</body>
</html>

対処した以降では、正しくスタイルが適用される:

IE with HTML5 style

一発で解決

便宜上、私は、既存の IE にHTML5 要素のすべて(<abbr> 要素も含む)を認識させることができる JavaScript を 1 つのファイルとして書いた。

HTML5 有効化スクリプトをダウンロード

次のように <head> タグの中にこのスクリプトを入れれば、IE で要素にスタイルを適用することができる:

<!--[if lte IE 8]>
<script src="html5.js" type="text/javascript"></script>
<![endif]-->

条件付きコメントを使ったが、これは、IE8 とそれ以前のバージョンだけに適用するためだけに使っている点に注意してほしい。願わくば、IE9 とそれ以降のバージョンでは HTML5 の要素をサポートして欲しいものだ。しかし、その時が訪れるたときには、この条件を再確認してほしい!

Conditions & Gotchas

JavaScript は必須です。

もちろん、これは、あなたのデザインは JapaScript に依存するという意味だ。私の個人的な感覚だが、もし、あなたが自分のサイトにセマンティックなマークアップを使ったとして、たとえ、その要素がスタイルされなくても、そのコンテンツは完全に読むことができるのであれば、それで構わない思う。

これは、Full Frontal のウェブサイトのスナップショットだ。これは HTML5 の要素を使って書かれている。これは、IE で、JavaScript を有効にした場合と無効にした場合の結果だ。JavaScript が無効だとしても、正しくカスケードするため、ちゃんと読めることが分かるだろう(CSS が無効だった場合に近い)。

IE with and without JavaScript to fix HTML5

A little head is always good

もし、あなたが <body> タグを使わずに新要素を使ったら(これでも完全に妥当)、IE は使った要素をすべて <head> タグの中に入れてしまう。これはとても変な例だったが、マークアップでは常に <head><body> タグを使うようにすれば、簡単に回避できることだ。Leif Halvard がデモを使ってさらに深い説明をしている

Firefox 2 と Camino のレンダリングのバグ

Firefox 2 と Camino は、レンダリングエンジンにバグを抱えている。特に、1.9b5 以前のバージョンだ:

Firefox 2 (バージョン 1.9b5 以前の Gecko ベースのブラウザも含む)はパースに関するバグを抱えている。p, h1, div などの "ブロック" 要素の開始タグが現れると、未知の要素を閉じてしまう。

W3 Schools stats によると、Firefox 2 のマーケット・シェアは 3% 程度だ。無視しても構わないと言えるだろう。

しかし、この問題を解決しないことには、これらのレンダリングエンジンでは相当におかしな状態でサイトが表示されてしまう。

このバグは、なぜ Gecko レンダリングエンジンが 新要素を認識しないかを、考えなければいけない。大まかに説明すると:Gecko は、未知の要素に入ると、そのコンテンツを削除し、それを次の要素の中に入れてしまうのだ。

例えば、次のコードをご覧頂こう:

<body>
  <header><h1>Title</h1></header>
  <article><p>...</p></article>
</body>

これは、あたかも、次のマークアップだったかのようにレンダリングされる:

<body>
  <header></header>
  <h1>Title</h1>
  <article></article>
  <p>...</p>
</body>

JavaScript を使わない場合の IE と、表示結果はよく似ている。わずかな違いだが、DOM ツリーは、実際には、あなたがウェブ制作者として想定していたような順番ではなくなるのだ。

対策

この問題に対処するには、2 つのアプローチがある。これまで、私は JavaScript を使わないアプローチでしか、うまくいっていない。

JavaScript を使うアプローチとは、この問題に遭遇したとき、DOM を巡回して、その要素を再配置する方法だ。

Simon Pieters が、どうやったらうまくいくのかについてちょっとした実例を持っている(ページの下の方にある)。しかし、実際には、私のマークアップには効かなかった。これは、絶対に、JavaScript を使って解決可能だ。しかし、すべてのマークアップの順列に対して何かをする必要はもうない。

2 つ目のアプローチは、Gecko XHTML を使う方法だ。もし、PHP のようなものを使って動的にページを生成しているか、または、.htaccess を生成して mod_rewrite を使えるようにできるなら、私は、これが一番簡単なアプローチだと分かった。

XHTML

まずはじめに、マークアップに施さなければいけない変更は、<html> タグに xmlns 属性を入れることだ。すべてのページに、これを入れよう:

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

次に、ユーザーエージェント文字列を判別する必要がある(通常は良くないアプローチだが、3% の Firefox ユーザーのためにやむを得ない)。Gecko ビルドが 1.9 以前なら、コンテンツタイプを application/xhtml+xml としてページを出力するようにする必要がある。

.htaccess ファイル(または、httpd.conf ファイル)の中で mod_rewrite を使いたいなら、次のルールを記述する必要がある:

RewriteCond %{REQUEST_URI} \.html$
RewriteCond %{HTTP_USER_AGENT} rv:1\.(([1-8]|9pre|9a|9b[0-4])\.[0-9.]+).*Gecko
RewriteRule .* - [T=application/xhtml+xml]

このルールで、Gecko ベースのブラウザのうち、そのバージョンが 1.9 以下、または、“rv:1.9pre”, “rv:1.9a”, “rv:1.9bx” のうち、x の部分がが 5 未満であれば、xhtml コンテンツタイプを送信する。

mod_rewrite のアプローチを使いたくなければ、サーバー側のスクリプトの中で手動で該当のヘッダを送信するようにする必要がある。

これは、PHP スクリプトにおける解決策だ:

if (preg_match('/rv:1\.(([1-8]|9pre|9a|9b[0-4])\.[0-9.]+).*Gecko/', $_SERVER['HTTP_USER_AGENT'])) {
    header('Content-type: application/xhtml+xml');
}

このコードは、スクリプトによって最初に出力されるものを表していなければいけない。つまり、コードのできる限りはじめのほうだ。

Gotcha: 死のイエロー・スクリーン

死のイエロー・スクリーンは、ページに XML エラーがある場合に出てくる。XML としてマークアップを与え、ブラウザーに明示的に XML としてそれを解釈させる場合、未知の文字を与えると、これが吐き出される:

Yellow Screen of Death

問題となる箇所がある、ということだ。

Strict マークアップ

あなたは、マークアップをクリーンにしなければならない。しかし、それは簡単なはずだ。なぜなら、あなたはもうマークアップ・ジェダイだからだ。違うかい?

HTML エンティティ

HTML エンティティはダメダメ。つまり &bull; ではうまくいかない。XML エンティティを使う必要がある。それは、このような文字を数値表現にしたものだ。

私は、以前に、HTML エンティティと、そのエンティティの XML 値を表示するツールを作ったから、これを使って調べてほしい:HTML エンティティ検索

例:&bull; は 8226 だから、XML エンティティは &#8226; となる。

ユーザー生成コンテンツ

あなたのサイトがユーザー生成コンテンツに頼っているなら、例えば、ブログ・コメントなどだが、もしそうなら、出力をサニタイズして、死のイエロー・スクリーンが吐き出されてしまうようなバリデーション問題を排除しておかなければいけない。

この最後の話だけで、JavaScript による解決策をさらに探求する理由になるのかもしれない。

以上で終わりだ。Firefox には自動アップデートという道がある。そして、私は W3Schools の状態を見て、こう思うんだ。Gecko のバグを持ったマーケット・シェアはすぐに無くなると言ってもいいだろう、と。

関連情報