はじめに
本連載では、「クロスブラウザに対応したデザインテクニック」をテーマに、保守性や互換性に優れたXHTML+CSSの書き方を紹介しています。
連載第1回目となる前回は、CSSを使ったクロスブラウザなデザインを実現するための第一歩として、「表示モード」について解説しました。今回からは、表示モードを統一してもカバーできないブラウザの実装差異を補う方法として、CSSハックを中心に紹介していきます。
対象読者
- XHTMLとCSSの基本を理解している方。
- Web標準に準拠したクロスブラウザなレイアウトデザインに興味のある方。
必要な環境
クロスブラウザなデザインを目指す上でターゲットとする視覚系ブラウザを一通り用意してください。本稿では、ユーザー数が多く、表示上の問題も多いことから、Windows Internet Explorer 6を中心に解説していますが、それ以外の視覚系ブラウザ（モダンブラウザを含む）に表示上の問題がないというわけではありません。意図したとおりに表示されているかどうかを確認したり、スタイルの変更時やCSSハック使用時に他のブラウザに影響がないかどうかを確認したりするために、できるだけ多くの種類・バージョンのブラウザで表示確認をするのが望ましいでしょう。
CSSハックとは？
ブラウザ間のCSSの解釈の相違（実装差異）や実装不備の有無を利用して、一部のブラウザをCSSの適用対象から外したり、あるいは特定のブラウザのみにCSSを適用したりする手法のことを「CSSハック」と言います。
CSSハックは、積極的な利用を進めるものではありません。極力使わないのが望ましいところですが、クロスブラウザなビジュアルデザインを目指す上では、そうは言っていられない現状もあります。
前方互換性の取り組みの具体策
前回の記事で、クロスブラウザなデザインを実現するための方針として、「前方互換性」と「後方互換性」の2つの考え方を紹介しました。現在とこれからのブラウザを意識した「前方互換性」の取り組みでは、Web標準に従ってWebページを制作することが基本となります。
具体的には、(X)HTML文書については、視覚系ブラウザに対し、原則「標準（準拠）モード」を採用することとし、Web標準の仕様に従って、文法的に妥当（valid）なマークアップを行います。CSSについては、外部スタイルシートを採用することを基本とし、こちらもWeb標準上正しい書式で記述します。外部スタイルシートを採用するのは保守性のためです。(X)HTML文書内にCSSを記述すると、構造化された文書の中に見栄えの指定が入ることになりますから、将来的にスタイルの変更が必要になったとき、該当の場所を探し出し、一つずつ修正を加えなければいけなくなります。これでは保守性が良いとは言えません。
ここで、前回も述べましたが、前方互換性の取り組みは、モダンブラウザでの閲覧のみを前提としているわけではありません。CSSを使用してデザインするわけですから、クロスブラウザな“ビジュアルデザイン（視覚表現）”を展開する上で対象となるのは、CSSをサポートするモダンブラウザとなります。ですが、“構造化された文書”という意味においては、後方互換性にも配慮したものとなります。
というわけで、前方互換性の取り組みでは、CSSをサポートしたモダンブラウザをクロスブラウザな“ビジュアルデザイン”の対象としますが、Web標準に従いさえすれば、クロスブラウザなビジュアルデザインを実現できるというわけではありません。モダンブラウザと言えども、ブラウザ間での実装差異や実装不備が存在し、表示のための修正を加える必要がでてくることもあります。このようなブラウザの表示に関する問題を解決するために利用されるのがCSSハックです。
CSSハックを利用する際の留意点
先に述べたように、CSSハックは使わないで済むのであれば、それに越したことはありません。利用は可能な限り最小限に止めることが大切ですが、使わざるを得ない場合には、CSSハックを必要としない正しい解釈をするブラウザに対し、影響の出ないものを採用するようにしましょう。
例えば、有名なCSSハックの一つに「アンダースコアハック」というものがあります。これは、「h1 { _color : red } 」のようにプロパティの先頭にアンダースコアを付けて記述するものですが、CSSの書式上は間違っています。Win IE（4-6）にのみに適用する目的で使用されることの多いCSSハックですが、新しく登場したWin IE 7には通用しません。IE 7で表示が崩れた！という問題の多くは、CSSの書式上正しくないCSSハックを利用していることが原因です。
書式上妥当なCSSハックを採用していれば、今後、正しい解釈をする新しいブラウザが登場しても、スタイルを修正する必要がない、あるいは修正にかかる手間を軽減することができるのです。
