マルチブラウザ対応を最大化するための実装戦略

2000年代までのウェブブラウザは、エンジンやバージョンごとに CSS・JavaScript の実装状況が大きく異なり、単一の手法では安定した閲覧体験を提供できません。

本稿では、入手可能な DHTML ブラウザを幅広くサポートするという本プロジェクト特有の要件を踏まえ、プログレッシブエンハンスメントとグレースフルデグラデーションの境界をどのように設定し、複数の実装手法をどのように組み合わせて最適な閲覧体験を実現するかを体系的に整理します。

1. 本稿の目的：ブラウザ差異と実装戦略の境界をどう引くか

本プロジェクトは、入手可能な DHTML ブラウザを幅広くサポートする方針を採っています。そのため、モダンブラウザを前提とした一般的なウェブ開発とは異なり、ブラウザごとの実装状況を精密に把握しながら、対応方針を段階的に切り替えています。

まず、各ブラウザがどの程度 CSS を実装しているかを踏まえ、どこからプログレッシブエンハンスメントを適用できるのか、あるいはグレースフルデグラデーションで最低限の閲覧性を確保すべきなのか、その境界を定義します。

本稿では、この「境界バージョン」をどのように設定したのか、そしてなぜその境界が実装戦略上重要となるのかを明らかにします。

2. 歴史的背景：ブラウザ実装の成熟と「境界バージョン」

CSS の実装が一定水準に達した2000年代後半、主要ブラウザはようやく「JavaScript が無効でも最低限の閲覧性を確保しつつ、実装状況に応じて機能を追加できる」段階に入りました。

プログレッシブエンハンスメントの境界として設定したバージョンは次の通りです。

• Firefox：3.5（Gecko 1.9.1、β版を含むなら 3.1）
• Opera：9.5
• Chrome：1.0
• Safari：3.0（境界は未特定）

一方、Internet Explorer は、独自仕様の条件付きコメントを利用できる IE9 まではバージョンごとに専用 CSS を提供し、IE10 以降でようやく他ブラウザと同じ、プログレッシブエンハンスメント戦略に合流します。

より詳しい情報は、「Web文書のグレースフルデグラデーションをムキになってやってみる」からのシリーズ記事を確認します。

3. 理想と現実：単一 CSS ファイルでの対応が難しい理由

この間にリリースされたブラウザ実装が理想的であれば、単一の CSS ファイルで次を両立できます。

• 旧ブラウザ：基本的な閲覧性を確保
• 新ブラウザ：段階的に閲覧性やデザインを強化（文末の表のAグレード）

実際には、ブラウザ実装が理想とは遠いことに起因して、次のような対策が必要です。

• 他ブラウザに影響しないプロパティを追加する
• 特定ブラウザにのみ有効なプロパティを CSS ハックで適用する

それでも、適当な CSS ハックが発見されていないなどの理由で対策しきれない場合があります。さらに極端なケースでは「読み込むだけでクラッシュするプロパティ」すら存在しました。これらの場合には、専用 CSS を用意するほかありません。

4. 実装手法の比較：条件付きコメント・CSS ハック・@supports・動的 CSS ロード

条件付きコメント（IE/Netscape の独自機能）

IE5〜9 と Netscape 4.x のみがサポートする機能で、専用 CSS を安全に読み込ませるには最適です。ただし標準化されなかったため、他ブラウザでは利用できません。

CSS ハック

ブラウザエンジンやバージョンの差異を CSS 内で吸収する手法です。すべてのケースで差異を埋める用途には足らず、限界があります。

@supports

標準化された機能検出で、実装状況に応じてスタイルを切り替えられます。モダンなブラウザでは有効ですが、レガシー環境では使えません。

JavaScript による動的 CSS ロード

CSS ハックで吸収できない差異に対して、エンジンやバージョンを判定して専用 CSS を読み込む最終手段です。必要に応じて DHTML で CSS 実装の不足分を補います。

5. まとめ：実装戦略の考え方

各ブラウザ・バージョン間の差異は大きく、単一の CSS だけで完全に吸収することは困難です。そのため、条件付きコメント・CSS ハック・@supports・動的 CSS ロードといった複数の手法を組み合わせ、ブラウザの実装状況に応じた最適で安定した閲覧体験を提供します。

この戦略の基盤となるのが、プログレッシブエンハンスメントを適用できる「境界バージョン」を明確に定義することです。境界を定めることで、どのブラウザにどのレベルの閲覧体験を提供するかを一貫した方針で判断できます。

次に、本プロジェクトで採用している DHTML ブラウザのサポート・グレードを示します。各グレードは、ブラウザの実装状況に応じて提供される閲覧性とデザインのレベルを表します。

DHTML ブラウザのサポート・グレード