pandamarket:CSSハック

CSSハックとは

CSSでWEBページをデザインするときに頭を悩ませるのがブラウザの問題です。ユーザー側が同じブラウザで常に新しいバージョンを使っているはずが無いのでブラウザやバージョンごとにどのような表示がされるのか認識しておかないといけない。それにも限界があるので、その中でもCSSに十分な対応ができない 4世代と5世代のブラウザをどう扱うか考えて制作しようと思います。それを対応させる技をCSSハックと言います。

5世代のブラウザは裏技（CSSハック）などを駆使すればなんとか問題なく表示させることもあるけど、4世代のブラウザについては裏技を使っても解決できない問題がたくさんあります。場合によっては強制終了したり、フリーズすることもあります。そのため4世代のブラウザにはCSSを読み込ませないようにすることが現実的な対処法と言えます。

NN4・IE4への対応

NN4・IE4のブラウザに外部CSSを読み込まないようにするには、CSSの＠import命令を使って外部CSSを指定します。このとき「url（）」を使い「＠import url("main.css")」 IE4が外部CSSを読み込んでしまいますので、「＠import "main.css";」と指定しましょう。
NN4の初期バージョンではCSSの＠import命令が実行されるとブラウザがフリーズすることがあるので、それを避けるためmedia属性の値に「screen」とは一致しない値を指定し先に NN4をはじいておく必要があります。

<head>
･･･
<link href="import.css" media="screen,tv" rel="stylesheet" type="text/css" />
･･･
</head>
・HTMLでこのように指定するとNN4はCSSを読み込まない。
↑
＠import "main.css";
・HTMLで指定された「import.css」のファイルにはこれを書きます。これでIE4はCSSを読み込みません。
↑
「main.css」表示指定のCSS。実際のスタイルの設定が書かれています。このファイルが「import.css」によってHTMLに呼び出されます。

バージョン5世代は別ファイルで

5世代の対処法としてコードのあちらこちらにハックを埋め込むような方法は問題回避の記述が多くコードがクリーンに保てません。そこでバージョン5専用の CSSを準備し、まず基本となるCSSを読み込んだ後にバージョン5専用の外部CSSを読み込ませて問題を上書き修正します。

＠media tty{
i{content:"￥";/*" "*/}}; ＠import'winie50.css';{;}/*";}
}/* */
このように指定すると「winie50.css」はWindows版IE5.0だけに読み込まれる。

＠media tty{
i{content:"￥";/*" "*/}}＠m; ＠import'winie55.css';/*";}
}/* */
このように指定すると「winie55.css」はWindows版IE5.5だけに読み込まれる。

/*￥*//*/{
＠import"macie5.css";
/**/
このように指定すると「macie5.css」はMac版IE5.xだけに読み込まれる。

IE6.0の対策も必要

バージョン4及び5のブラウザ対策は上記の方法でほぼ解決されますが、6世代の中でもっとも問題の多いのがIE6.0でしょう。対策としては、IE6.0だけに指定する方法と、 IE6.0以外のブラウザにだけ適用させる方法のふたつになります。

IE6.0だけに適用したい場合、セレクタの先頭に「*html」をつけます。子孫セレクタをセレクタの先頭につけることですが、html要素は最上位の要素なので、他の要素に含まれることはあり得ません。そのため本来なら無視されることになりますが、Windows版IE5.0～6.0とMacintosh版IE5.xはこれを普通に適用してしまいます。

次にIE6.0以外のブラウザにだけ適用したい場合には、単純にIE6.0が対応していない子セレクタや属性セレクタを使うだけでいい。たとえば、セレクタの先頭に子セレクタを使って「html＞body」とつけるだけで、Windows版のIEには一切適用されなくなります。

*html セレクタ{ ～表示方法の指定～ }
Windows版IE5.0～6.0とMac版IE5.xにだけに適用される。

html＞body セレクタ{ ～表示方法の指定～ }
IE6.0以外の新しいブラウザだけに適用される。

ホーリー・ハック

上記の方法のほかにIE6.0が起こす特定の問題を修正するための一般的なハックがあります。これは「ホーリー・ハック」と呼ばれ、IE6.0 の配置に関連する問題をほとんど何でも解決してくれるものです。コードは下記の通りですが、重要な部分は「height：1％」という部分です。 IEの配置に関する問題の多くは、該当するボックス、またはそれを含むボックスの幅、高さを設定してあげることで解決します。例えば「width：100％」などを設定するだけでも問題を解決してくれます。

/*Hides from IE5-mac ￥*/
*html セレクタ{ height: 1% }
/*End hide from IE5-mac */

「ホーリー・ハック」。問題を発生しているボックス、またはそれを含むボックスを「セレクタ」に指定して「height：1％」を適用するだけです。1行目と3行目は、2行目をMacintosh版IE5 に適用しないための裏技になっています。