コニファマメ知識

CSS ハック

CSSハック(css hack)とは、Webブラウザ間のCSSの解釈の違いやバグを振り分けの条件として、特定のブラウザに対しスタイルを適用、または非適用とする手法です。
関連ページ： Internet Explorerの特異な振る舞いのfixに役立つ条件付きコメント
関連ページ：ブラウザの互換モードによるwidth解釈の違い
関連ページ：ドキュメントタイプ宣言による「標準準拠モード」と「後方互換モード」

●cssハック(boxモデルハック）の1例
cssで#boxのスタイルを下の画像のように（width420px）とすると、Aの長さは padding分(20*2)pxとborder分(20*2)pxを足して500pxになります。 ところが、IE5(Win/Mac)、IE6互換モードでは、widthの解釈が正しくなされず、Aの長さが 420pxになってしまいます。

そこで、上の#box1のようにcssを書きます。

・他のモダンブラウザ用に「width 420px」としてその直後に「!important;」を書き入れます。これは同じ宣言内で最優先する値であることを意味する規則です。ところが、WinIE5～6はこれを無視して後の値を適用します。それを利用してWinIE5～6用に「width : 500px;」を適用させます。

・一方、MacのIE5は「!important;」の規則に従い、420pxを適用してしまいます。でも「width」のバグを抱えていますので、やはり500pxを適用させなければなりません。
そのためには「width: 420px　!important;」をすべて無視させる必要があります。そこでコメントアウトを使ったハックです。MacのIE5は、「/*\*/」のようにコメントアウト文を閉じる寸前にバックスラッシュがあると、コメントの終了を理解できず、それ以降を適用しません。そして普通に閉じたコメントアウト文「/* */」に出会うとそこをコメントの終了と理解し、また適用を開始します。結果、500pxが無事適用されます。

・正しく適用していれば「#box1」は、上の画像と同じ幅になります。
※なお，この方法は、W3Cの文法チェックを通ります。