CSSハックで、クロスブラウザ対応のCSSを記述する

クロスブラウザなレイアウトデザインテクニック 第2回

古いブラウザへの対応

　前方互換性を取り、クロスブラウザなデザインに取り組む上でネックとなるのが、CSSのサポートが不十分なIE 3-4、Netscape 4などの古いブラウザへの対応です。このような古いブラウザでCSSを駆使したWebページにアクセスすると、レイアウトが崩れて閲覧が困難になったり、場合によっては強制終了してしまったりするなど、デザイン面のみならず、アクセシビリティの面でも逆効果となってしまう恐れがあります。

　実際のところ、対象のWebページを訪れるユーザーの中には、そのような古いブラウザを使用している人はいないかもしれません。ですが、あらゆる人々を対象とするアクセシビリティへの取り組みが求められている今、古いブラウザへの対応が求められることも少なくありません。

　そこで、アクセシビリティ確保という前向きな意図をもって使用するCSSハックとして、CSSの適用対象から古いブラウザを排除する方法を紹介していきたいと思います。

Netscape 4を排除

　次節より、「@import規則」を使用してNetscape 4を含む古いブラウザを一括で排除する方法を紹介していきますが、Netscape 4の初期バージョンで、@importが記述されたファイルを読み込むと、ブラウザが強制終了してしまうという問題が起こることがあります。そこでまず、@import規則が実行される前に、Netscape 4を“安全に”排除した上で、他の古いブラウザを@import規則で一括して排除するという、二段階でフィルタをかける方法を説明していきますので、この点に留意しながら読み進めてください。

　さて、Netscape 4には、media属性の値が"screen"でなければ外部スタイルシートを参照しないという実装不備があります。これを利用して、media属性の値に"screen"以外を指定、または、"screen,tv"のように、複数のメディアをコンマ区切りで指定することで、Netscape 4をスタイルの適用対象から排除することができます。

（X）HTMLソース：link要素のmedia属性の値に「screen」以外を指定してNetscape4を排除

<link rel="styleseet" type="text/css" href="filter.css" media="all">

　または

（X）HTMLソース：link要素のmedia属性の値に複数の値を指定してNetscape4を排除

<link rel="styleseet" type="text/css" href="filter.css" media="screen,tv">

　上記サンプルコードでは、Netscape 4以外のブラウザが、外部スタイルシート「filter.css」を参照します。次からは、ここで読み込まれる外部スタイルシート（filter.css）に@import規則を記述して、Win IE 3-4、Mac IE 4を排除します。

Netscape 4、Win IE3-4、MacIE 4を排除

　Win IE 3-4、Mac IE 4を排除するには、「@import"style.css"」というように、@import規則で外部スタイルシートを二重引用符で囲む書式で記述します。これは、Win IE 3が@importに未対応であることと、Win IE 4とMac IE 4は@import url()という書式でなければ読み込まないという実装不備を利用したものです。

　このCSSハックは、Netscape 4以外のブラウザが読み込む外部スタイルシート内（前節サンプルでは、filter.css）に記述します。

フィルタ用CSSのソース：Netscape 4、Win IE3-4、MacIE 4を排除

@import"style.css";

　上記サンプルコードでは、Netscape 4、Win IE 3-4、Mac IE 4以外のブラウザが、外部スタイルシート「style.css」を参照することになります。

　なお、Netscape 4も@import規則に未対応ですが、既述したように、ごく一部の初期バージョンで、ブラウザの強制終了を引き起こすことがあるため、ここではまずNetscape4を安全に排除した上で、Win IE3-4、MacIE 4を排除するという、2段階で外部スタイルシートを読み込ませる方法を取っています。

2段階で外部スタイルシートを読み込ませる概念図

Mac IE 4.5を排除

　加えて、Mac IE 4.5を排除したい場合には、「@import url("style.css")」というように、外部スタイルシートを二重引用符で囲む書式で記述します。これは、Mac IE 4.5で「@import url()」を使用する場合、引用符なし、または一重引用符でなければ外部スタイルシートを読み込まないという実装不備を利用したCSSハックです。

フィルタ用CSSのソース：Mac IE 4.5を排除

@import url("style.css");

Mac IE 5を排除

　Mac IE 5は、safariが登場したことで開発中止になりましたが、それまではMacユーザーの中でシェアの高かったブラウザの一つです。Win IE 5と比べればCSSのサポートは良いように感じられますが、クセのある実装不備も存在します。

　Mac IE 5をスタイルの適用対象から外すには、CSSソース内でのコメントの書式を「/*...\*/」という形式で記述します。これは、コメントハックの一つで、「Holly Hack」と呼ばれます。

　CSSのコメントの書式は、「*/」で閉じることになっていますが、「\*/」というように、「\（欧文フォントではバックスラッシュ）」を付けて閉じると、次の「*/」が現れるまで、Mac IE 5にスタイルは適用されません。

CSSのソース：MacIE 5を排除

h1 { color: blue }
/* 下記のスタイルは、Mac IE 5には適用されない \*/
h1 { color: red }
/* これ以降のスタイルは Mac IE 5にも適用される */
h2 { color : green }

　この例では、h1要素に対し、文字色「青」のスタイルが「赤」で上書きされるはずですが、Mac IE 5には適用されず、文字色は青のままになります。最期の「*/」以降のスタイルはMac IE 5にも適用され、h2の文字色は「緑」になります。

　また、Holly Hackは、次のように特定のプロパティに利用することもできます。

CSSのソース：MacIE 5を排除

h1 {
 /*\*/ color : green; /* */
}

　後ほど、このHolly Hackを利用して、Mac IE5のみにスタイルを適用する方法についても紹介しますので、仕組みをよく理解しておいてください。