CSS を多用した環境で ウェブページを作成していると、古いブラウザでは、CSS を正しく認識できない、または新しい仕様のプロパティに未対応のため表示が崩れてしまうなどブラウザごとに表示が異なる事態に遭遇することがあります。この事態を回避するために、ブラウザ側のバグを技術的に探求してきたハックと呼ばれるものを使うことになります。 ここでは主に、Mac版Internet Explorer 5, Netscape Navigator 4 などの古いブラウザには、CSS を適用させない手法や特定の問題箇所だけを上書き修正する手法を紹介します。
ただし、これらブラウザ側のバグを利用した CSS のハックは使わないに越したことはありません。ハックを使う必要のないデザイン（サイト設計）を心がけることは、どのような環境でも正常に閲覧できるデザインへとつながります。適度に前方・後方互換の両方を備えたデザインを目指してください。
Macintosh ユーザーは、Safari への完全乗り換えの傾向にありますが、Internet Explorer 5 を利用しているユーザーもいます。 この手法は、Mac版Internet Explorer 5 にのみ有効な CSSバグを回避する手法です。
Mac版Internet Explorer 5 では、 CSSファイル内にコメント( /* コメント */ )を書く際、コメントを終わらすことを示す「*/」を「¥*/」とすることで、Mac版Internet Explorer 5 のみコメントが終わったとが認識できず、コメントが続いていると認識します。 そして、通常のコメントの終了を示す「*/」があると、そこではじめてコメントが終了したことを認識します。
これを利用して、Mac版Internet Explorer 5 でバグを回避する（CSS を適用させない）方法は以下のようになります。
Mac版 IE 5.xでも正しく認識できるスタイルを指定 /* ここでMac版 IE 5xのバグを利用する ¥*/ 他のブラウザで正しく認識できるスタイルを指定 /* ここから下はMac版 IE 5xでも認識できる */ …どのブラウザでも正しく認識できるスタイルを記述する…
さらに、今度は上記のバグを応用することで、Mac版Internet Explorer 5 にのみスタイルを適用する方法を紹介します。 この方法は、他のブラウザでは、スタイルの記述ではなく、たんなるコメントとして扱われるので、Mac版Internet Explorer 5 にのみスタイルを適用させることができます。つまり、Mac版Internet Explorer 5 専用のスタイルということになります。
/* ¥*//*/ Mac版 IE 5.x にのみ適用させるスタイルを記述 /**/ /* 今度はMac版 IE 5.x にのみ適用させないスタイル ¥*/ ここに記述されたスタイルは、Mac版 IE 5.x にのみ適用されない /*ここから以降は、どのブラウザも正しく認識できるスタイルのみを記述*/ …どのブラウザでも正しく認識できるスタイルを記述する…
Win版・Mac版に共通して Internet Explorer 4.0 のバージョンにスタイルを適用させないようにするには、"@import" の命令を利用します。"@import" は、スタイルを記述している中から別の CSSファイルを参照させる命令です。 Internet Explorer 4.0 は、"@import" に一応は対応してはいるのですが、書式によって対応できなくなります。 "@import" の書式には、次の 2通りがあります。
@import url(xxx.css);@import "xxx.css";Internet Explorer 4.0 が対応できているのは、1番目の "@import url(xxx.css)" の書式で、2番目の "@import "xxx.css"" の書式には対応していません。 これを利用することで、Internet Explorer 4.0 には CSS の適用を回避させることができます。 ただし、Internet Explorer 4.x 系列のバージョンの中でも、Mac版Internet Explorer 4.5 は、"@import" のどちらの書式にも対応しており CSS が適用されてしまいます。しかし、現在も、Mac版Internet Explorer 4.5 を利用しているユーザーが存在するかどうかはあやしいところです。
Netscape Navigator 4 に CSS を適用させないようにするには、link要素の media属性で CSS を適用するメディア(出力対象)を Netscape Navigator 4 が認識できない属性値で指定します。
この media属性は、CSS を適用させるメディアを限定し、通常、media属性の指定がない場合は、一般のパソコン画面だけが CSS の適用対象となる「media="screen"」が指定されます。
そしてNetscape Navigator 4 では、media属性を指定した場合は、属性値が "screen" のみでなければ CSS を適用しなくなるというバグがあります。 これを利用して、Netscape Navigator 4 でバグを回避する方法は、たとえば以下のように記述することで可能になります。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <link rel="stylesheet" href="xxx.css" type="text/css" media="screen,tv" />
なお、Netscape Navigator 4 は、Internet Explorer 4.0 対策の "@import" で CSS の適用を回避する方法に対応しておらず、さらに "@import" の指定があると、フリーズしてしまうという問題の実装を抱えています。 そこで、"@import" が実行される前に、この media属性値によるバグを利用して先に CSS の適用を回避させておくと安心です。このため media属性を "screen" 以外の値で指定しておく必要があります。
/* 共通のスタイル */
@import "common.css";
/* Win版 IE5.0用に上書きするスタイル */
@media tty {i{content:"\";/*" "*/}}; @import 'wie50.css';
{;}/*";}}/* */
これは、Win版Internet Explorer 5.0 で閲覧した場合に、共通の CSS から表示が崩れがあると、Win版Internet Explorer 5.0専用の CSS を作成しておいて、表示に問題のある部分のみを上書き修正してしまう方法です。 書式は少々複雑ですが、これを指定することにより上記の場合は "wie50.css" が、Win版Internet Explorer 5.0 にのみ適用され、問題のある部分を上書き修正することができます。 同様に Win版Internet Explorer 5.5 にのみ適用させる場合は、以下のように記述します。
/* 共通のスタイル */
@import "common.css";
/* Win版 IE5.5用に上書きするスタイル */
@media tty {i{content:"\";/*" "*/}}@m; @import 'wie55.css';
{;}/*";}}/* */
さらに、Win版Internet Explorer 5.0, 5.5 の両方で表示に問題がある場合は、以下のように記述することで Win版Internet Explorer 5.0, 5.5 の両バージョンにのみスタイルを適用させて上書き修正が可能になります。
/* 共通のスタイル */
@import "common.css";
/* Win版 IE5.x系列用に上書きするスタイル */
@media tty {i{content:"\";/*" "*/}} @import 'wie5x.css'; /*";}}/* */
Win版Internet Explorer 6 のバージョンには、アンダースコア（_）を CSS のプロパティ名に前置することで、定義されていないプロパティであると無効な指定と認識されるが、Win版Internet Explorer 6 のバージョンでは、これを正常な指定として読み込んでしまうバグがあるために、Win版Internet Explorer 6 のバージョンにのみスタイルを適用させることが可能です。ただし、この方法は CSS Validator やブラウザの文法チェックにおいてエラーを起こすことになります。
position : fixed ; _position : absolute ;
たとえば、Win版Internet Explorer 6 のバージョンは、配置方法を指定する positionプロパティの "absolute" には対応していても、指定された要素を "absolute" に従って固定し、スクロールしても位置を動かないよう表示する "fixed" の値には対応していません。そこで、positionプロパティにアンダースコア（_）を前置して、Win版Internet Explorer 6 のバージョンにだけ "position : absolute ;" の指定として上書きさせることができます。その他のブラウザでは "absolute" の指定は、プロパティ名が定義されていないものとして認識されるために無効な指定となり、"fixed" の指定がそのまま適用されます。
もう一つの、Win版Internet Explorer 6 対策として、子供セレクタを使った上書きテクニックがあります。引き続き、positionプロパティの "absolute" と "fixed" を例にあげます。
div#menu { position : absolute ; }
body > div#menu { position : fixed ; }
子供セレクタは、"<body>～</body>" 間において直接の子要素となる "div#menu" のみを適用対象とします。Win版Internet Explorer 6 は、"position : absolute ;" には対応していますが、子供セレクタには対応していないため、"body > div#menu { position : fixed ; }" の指定を無視してくれます。これにより、子供セレクタに対応している Win版Internet Explorer 7, Netscape, Firefox, Opera, Safari の各視覚ブラウザにおいては、"fixed" の指定が上書きされて有効となります。また、こちらのテクニックであれば、CSS Validator やブラウザの文法チェックにおいてアンダースコアハックのようなエラーが検出されることもありません。
現状では、Win版Internet Explorer 4 ～ 5, Mac版Internet Explorer 5, Netscape Navigator 4 などの古いブラウザを利用している人は極少数ながらも確実にいます。 そのため、どうしてもこれまで紹介してきたようなブラウザ側のバグを技術的に探求してきたハックと呼ばれるCSSバグ回避手法を使用せざるを得ません。
しかし、Win版Internet Explorer 4, 5 のユーザーは、Win版Internet Explorer 6 へ、Mac版Internet Explorer 5 のユーザーは Safari へ、さらに Win版Internet Explorer 6 のユーザーは Firefox や Opera へと、ユーザーは次々とウェブページのレンダリング面に優れた（正しい実装の）ブラウザへと乗り換えていく傾向にあります。 ブラウザ開発各社も W3C などの標準団体が策定する仕様（Web標準仕様）に準拠することを宣言し、また仕様に準拠できていることを謳い文句としています。そして、仕様に対して正しい実装をもったブラウザが次々と登場しています。 近いうちに、これらブラウザ側のバグを利用して回避する手法はほとんど必要がなくなることでしょう。