HTML5×CSS3の実装で抑えておくべきこと

各々のブラウザがドラフトの仕様を実装している段階とはいえ、既にほとんどの機能が実装できる状態にあります。動向が注目されていたIE9もHTML5のサポートを正式に表明しているということですから、基盤は着々と整いつつあるようです。今回はHTML5でのマークアップ、CSS3でのコーディングを実装するにあたって、何に留意すれば良いのか、現状ではどのような対処をすれば良いのかというところに焦点を当ててみます。

Progressive Enhancement

今までは高水準のブラウザで表示確認を行い、下位ブラウザやデバイスの対応を個別に行うというやり方が主流でしたが、今後は最低限のアクセシビリティを確保した上で、高水準のブラウザ対応を行うという『Progressive Enhancement』の考え方に則って制作する必要があります。現状では、ブラウザによって対応状況が異なるため、全ての環境で新機能を活用することは難しい状況ですが、2010年の改訂版JISによって次世代Webの実現に向けてまた一歩進むことが出来そうです。

依存する技術

現状では、「最低限の見栄えを確保するということ」即ち、新しく追加されたセマンティックな要素が使用できず(低水準のブラウザでは新要素を認識しないため)、結局のところ「現実的な妥協案」にせざる終えなくなります。そこで私が目をつけたのが改訂版JISで明示された『依存しているウェブコンテンツ技術』という章です。

「JIS X 8341-3 改正原案（2009年1月公開レビュー版）」

簡単に言えば、利用者が(JSやFLASHなど)特定の技術を有効にしていることを前提にして制作をしてもよいというものです。ただし「依存している」とするには『アクセシビリティ・サポーテッド』を満たしている必要があります。

アクセシビリティサポーテッド

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

article要素やheader要素などを使用してもIE6ではレンダリングされないため、スタイルを適用することができません。そうしたHTML5の新しい要素やJavaScript(以下JS)などの "コンテンツ側の実装技術" と、ブラウザなどの "ユーザーエージェント" 、音声ブラウザなどの "支援技術" とを鑑みて、依存するかしないかを検討する必要があります。コンテンツを重視するのであれば『依存する』として、JSを有効にしていることを前提に下位ブラウザの見栄えや動作を確保することも可能になります。

現実的な実装案

ここまでは今まで考えてきたことのおさらいでしたが、では実際に使えるJSライブラリが存在するのか、CSS3はどの程度まで使用可能なのか等について、私が得た経験から紹介してみます。

HTML5でのマークアップ

アクセシビリティサポーテッドを満たした上で『依存する』とし、JSの使用を前提にするのであれば、DOM ScriptingによってIE6,7でもHTML5の新要素を扱えるようにすることができます。有名なのはRemy Sharp氏が公開した『html5.js』というライブラリです。実装方法は、以下のようにIE向けに設定するだけで済みます。

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

条件分岐の意味は「利用しているIEがバージョン8.0以下のとき」となります。IE9ではHTML5が実装されるということなので、含める必要はないでしょう(皮肉)。

CSS3でのコーディング

こちらも同様、JSの使用を前提にするのであれば対応方法はあります。以前「次世代Web 7つのポイント」で紹介させていただいたCSS3の擬似セレクタに対応するライブラリ『ie-css3.js』は実際試してみるとHTML5.jsと競合してしまうのか機能しなかったので(試用せずに紹介してしまい申し訳ありません)、変わりに『ie9.js』というライブラリを紹介させていただきます。

2年ほど前に、Internet Explorerの動作をW3C標準仕様に準拠させる『ie7.js』というライブラリが公開されましたが、それの最新版が『ie9.js』ということになります。IE5.5からIE6までのHTML/CSSの解釈を調整し、IE7との互換性を確保してくれる『ie7.js』と同様、『ie9.js』はIE5.5からIE8までの互換性を確保してくれるという強力な機能を備えています。ざっと機能を列挙すると、以下のようになります。

• 擬似クラス対応
• 属性セレクタ対応
• 透過PNG対応
• position:fixed対応
• margin:0 auto;対応
• max-height,width対応
• min-height,width対応>
• IE5/6のバグを修正>

実際どうだったかということについてですが、十分使えるというのが個人的な感想です。『ie7.js』が公開されたときは、話題になっているほど万能ではなく、JSを無効にしている場合などが懸念され現場で使用されることは先ずありませんでした。しかし『プログレッシブエンハンスメント』の最低限のアクセシビリティを確保するという考え方に則り、『アクセシビリティサポーテッド』を満たし『依存する』とするのなら問題ありません。高水準のブラウザと同じ見栄えというわけにはいきませんが、最低限の見栄えを確保するのには十分貢献してくれます。実装はhtml5.jsと同様、以下のように設定します。

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

ブラウザ対応

ライブラリによって最低限の見栄えを確保できるとはいえ、HTML5、CSS3の新機能をフルに活用できるかというと現時点ではそうはいきません。要素をアニメーションさせるというのは高水準向けの対応なので論外ですが、要素を横並びにし、高さを調整してくれるboxプロパティや、複雑なグラデーションを画像なしに表現できるgradientプロパティなどが機能しないとレイアウトや見栄えに大きな影響を与えてしまいます。

これについては不本意ながらブラウザ対応という形で対処するしか方法はありません。例えばカラムレイアウトについては、以下のようにie向けのCSSを作成しfloatプロパティを適用する必要があります。

<!--[if lte IE 8]>
<link href="./css/ie.css" rel="stylesheet" media="screen,all" /></script>
<![endif]-->

既存のCSS

body #sampleArea div{
	display:-webkit-box;
	display:-moz-box;
}

IE用のCSS

body #sampleArea div{
	float:left;
}

また、グラデーションについては近似する色をIE向けに指定します。

body{
background-color:#00abeb; /* IE向け */
background:-moz-linear-gradient(top, #00abeb, #fff); /* FireFox向け */
background:-webkit-gradient(linear, center top, center bottom, from(#00abeb), to(#fff)); /* Safari向け */
}

これだけの対応だけ忘れなければ、十分な見栄えを確保することが出来ます。今回はちゃんと試したので間違いありません^^;。もしかしたら近い将来CSS3のプロパティにも対応したライブラリが登場するかもしれませんが、その時はこうした対応も不要になりますね。念のため確認したブラウザは以下になります。

• FireFox 3.6
• FireFox 3.x
• Safari 4
• Google Chrome
• Opera 10.5
• IE6
• IE7
• IE8

最後に

Google Chromeを代表する新時代のモダンブラウザ、既存ブラウザのバージョンアップ、そしてモバイルコンテンツの流行、ネットブックの普及、そしてiPhoneを始めとするスマートフォンの出現など、ここ2年の間に状況は一変しました。そうした時代の流れに合わせて新しい考え方や技術を把握し、あらゆる選択肢の中から最適と思われるプランを最初に実行していくことが次世代Webを引っ張っていく者の役割なのではないかと考えています。最も私などはペーペー中のぺーぺーですが、今回そうした機会を与えて下さった方々にはとても感謝しています。私も少しずつ精進ていきます。