HTML5 下位ブラウザへの対応

HTML5でマークアップをする機会があったので、まず新しく追加された要素を「HTML5.JP」で調べ、次に「HTML5 Gallery」というサイトでどのように実装されているのかを確認しました。その中でIE6を代表する下位ブラウザへの対応を行っているサイトが多く見受けられたので自分の解釈も含めつつアウトプットしてみます。

ライブラリ

前回「次世代Web 7つのポイント」という記事で述べましたが、いくら「IE6の葬式」が行われたとはいえ、(現段階では)最低限の見栄えは確保する必要があります。HTML5の実装を進めているというIE9の実態は謎に包まれており、IE6～IE8は言わずもがな対応していません。このような状況化で、最低限の見栄えを確保するということはHTML5で追加されたセマンティックな要素が使用できず、結局のところ現実的な妥協案にせざる終えなくなります。そこで私が目をつけたのが改訂版JISで明示された『依存しているウェブコンテンツ技術』という章です。簡単に言えば、利用者が(JSやFLASHなど)特定の技術を有効にしていることを前提にして制作をしてもよいというものです。ただし「依存している」とするには『アクセシビリティ・サポーテッド』を満たしている必要があります。

アクセシビリティ・サポーテッドとは、作成したコンテンツが標準仕様に沿っていて、利用するユーザーがアクセシブルに利用できるかということを指します。これは単にJISに適合していれば良いという話ではなく、コンテンツ側の実装技術とユーザーエージェント/支援技術側の折り合いをつけるという部分が強調されています。

技術をアクセシビリティ・サポーテッドな方法で用いるというのは、支援技術（AT）および OS、ブラウザ、その他のユーザエージェントのアクセシビリティ機能と連携するということを意味する。技術は、アクセシビリティ・サポーテッドな方法で用いられている場合のみ、WCAG 2.0 の達成基準を満たすために依存することが可能である。ただし、何らかの達成基準を満たすために用いられていない（つまり、同じ情報あるいは機能が、アクセシビリティ・サポーテッドな他の方法でも利用可能である）かぎり、その技術をアクセシビリティ・サポーテッドではない（支援技術などと連携しない）方法で用いることができる。

ウェブコンテンツ・アクセシビリティ・ガイドライン (WCAG) 2.0

現状では、ブラウザによって対応状況が異なるため、全ての環境で新機能を活用することは難しい状況です。article要素やheader要素などを使用してもIE6ではレンダリングされないためスタイルを適用することができません。そうしたHTML5の新しい要素やJSなどの"コンテンツ側の実装技術"と、ブラウザなどの"ユーザーエージェント"、音声ブラウザなどの"支援技術"とを鑑みて、依存するかしないかを検討する必要があります。コンテンツを重視するのであれば「依存する」として、JSを有効にしていることを前提に『HTML5.js』を使用し、下位のブラウザの見栄えを保持することができます。逆に下位のブラウザの対応が必須なら「依存しない」として今まで通りの対応をするということになります。

以前「Webという世界ではコンテンツというレベルでの情報提供が必須である」と述べましたが、HTML5で追加されたセマンティクスな要素を使用すれば、情報をより意味のあるものとして定義することができます。それらを導入することで、すぐに変革がもたらされるわけではありませんが、将来的にWebという媒体が最大限に力を発揮するためのいわば投資のようなものです。それに比べてユーザーエージェントや支援技術において問題とされているのは「古いブラウザがあるから導入できない」「新しい要素はまだ対応していない」ということばかりが注目されています。「依存」という考え方が生まれたのも、コンテンツの重要性が認められ、将来的なWebの姿が明確になってきたからだと思いますし、個人的には一歩踏み出していこうよ！という心境です。

やっと本題ですが、IE6～IE8向けの対応として『HTML5.js』を使用しているサイトがほとんどでした。IE9では対応しているものとして扱い、以下のように「IE8以下に適用」という指定をすれば良いと思います。

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

またCSS3の擬似セレクタに対応するスクリプト『ie-css3.js』を使用しているサイトもありました。これも『DOMAssistant』というスクリプトと併用し、先ほどのコメント内に追記するだけです。

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

メッセージ

YouTubeがIE6を代表する下位ブラウザのサポートを終了したのは記憶に新しいですが、最近ではGoogleまでもが段階的に終了することを明らかにしています。さらにTwitter上では「IE6 Must Die」というIE6の撲滅運動が展開されています。サポートを終了することには何の異存もありませんが、使用するユーザーがいる限り、何かしらの対処を施す必要はあると思います。実際に「HTML5 Gallery」で見たサイトのほとんどが下位ブラウザ向けにメッセージを添えています。

<!--[if lte IE 6]>	
<h2>What the…</h2>
<p>Woah—it looks like you’re using Internet Explorer 6 or below. While I salute you for being so staunchly old school, you gotta know that IE6 just can’t display modern sites like this properly. You’re still most welcome here—just be aware that this isn’t how it’s <em>meant</em> to look.</p>
<![endif]-->

日本語では以下のように設定すれば良いと思います。ブラウザのロゴなどを使用して、各ベンダへの直リンクを貼ってあげるとより親切です。

<!--[if lte IE 6]>	
<p id="caution"><strong>あなたは旧式ブラウザをご利用中です</strong>このウェブサイトを快適に閲覧するにはブラウザをアップグレードしてください。</p>
<![endif]-->

サポートしないということ

@import命令を使用して、NN 4.xやIE5.xにCSSを適用しないといった手法はよく知られていますが、これらの対処は表示崩れを回避するために施されているわけですから、サポートしているといえます。つまり、コンテンツ側の技術が有効で、問題なく機能することが前提で作られているので、機能しない下位ブラウザはもう知りません、特別な対処は施しませんというのがサポートしないということになります。「HTML5 Gallery」では以下のようにIE6向けのスタイルを適用しているサイトもありましたが、おそらくこうした対処もされなくなっていくのでしょう。

<!--[if IE 6]>	
<link rel="stylesheet" href="/css/ie6.css" type="text/css" media="screen" />
<![endif]-->