CSSハック

CSSハック（英：CSS Hack）は、Webサイト作成の際にWebブラウザ間（以下単に「ブラウザ」）で異なるCascading Style Sheets(CSS)の実装状況の違いやバグなどを吸収し、極力各ブラウザでの表示を同一にするためのテクニックの一つである。

CSSハック以外に「CSSフィルター」("CSS Filter")とも呼ばれるが、Internet Explorer(IE)の独自拡張CSSであるフィルタとの混同を避けるためか日本ではCSSハックの語が用いられることが多い。

概要

「Cascading Style Sheets」も参照

W3Cの標準仕様に従ったWebサイトを作成すれば、理想的には各ブラウザでの表示の差は生じない（あるいは少なくなる）ことになるが、実際にはブラウザによりCSSのサポートが異なり、また比較的サポートの遅れたブラウザが進んだブラウザに置き換わるまでには時間を要するため、表示の差異が生じる原因となる。特にIE5.5以前（IE6.0の互換モードなども含む）ではボックスモデルの解釈がW3C標準のものと異なり、widthプロパティの値にボーダーとパディングを含めていたことがこれらのブラウザが無視できないシェアを占めていた時期のWebサイト作成の障害の一つだった。解決法としてはブラウザ間での違いが目立たない値に指定する（例えばボックスモデルの問題はボーダーとパディングをともに0とする）などいくつかの方法が考えられるが、CSSハックはそうした実装の違いをCSSコーディングのテクニックで吸収する方法の一つである。

具体的には各ブラウザの実装状況やバグを逆手に取り、ブラウザによって異なる宣言を読み込ませることとなる。ハックの中には対象とするブラウザ以外にも効果を及ぼすものもあるため、そうしたブラウザ向けに正規の方法で値を指定し直す場合もある。CSSハックの定義は曖昧で、一部のブラウザのみが実装しているセレクタなどを単に使用しただけのものをCSSハックに含めるかは場合による。

ブラウザの置き換えは常に続いているため、あるブラウザを対象としたCSSハックはそのブラウザのシェア低下とともに意味が薄れることになるが、一方で別のブラウザを対象とした新たなCSSハックが生み出される可能性もある。またブラウザのバグを利用するものであるため、サイト作成時点では問題なく使用できたとしても、将来新しいブラウザがリリースされる際にバグが修正されることで古いブラウザ向けの宣言が制作者が意図に反して適用される可能性がある。実際にIE7のリリースによりそれ以前は通用していたCSSハックに問題が発生することとなった。CSSの記法として妥当(valid)でない（Validatorでinvalidと判定される）ものも存在する。こうした点から使用に関しては種々の議論がある。

CSSハックの例

CSSハックにはさまざまなものがあるが、詳細は外部リンクを参照のこと。ここでは前述のボックスモデルに関する問題を解決する手段として用いられた「ボックスモデルハック」を紹介する。2000年暮れにTantek Celikにより考案されたもので、2006年10月刊行の大藤幹『スタイルシートサンプル&リファレンス』で既に「今では使われなくなった古い裏ワザ」として掲載されている。

#elem { 
 width: [IE width]; 
 voice-family: "\"}\""; 
 voice-family:inherit;
 width: [Other browser width];
}
html>body #elem {
 width:[Other browser width];
} 

以上のように記述することでIE5.5以前とモダンブラウザ（比較的CSS対応の進んだブラウザの意味）でwidthプロパティに別の値を指定することができる。IE5.5以前では1番目のvoice-familyプロパティの部分で読み込みを終了しそれ以降の宣言は読み込まれないため、最初のwidthプロパティのみが有効となる。一方、モダンブラウザではそれ以降も読み込まれる。2回指定しているのは、Opera5にもIE5.5以前同様の不具合があり1番目のvoice-familyプロパティで読み込みを終了すること、またIE6以前は子要素セレクタ（html>bodyの部分）に対応していないため、両方を考慮するためには必要となるもので、Opera5を考慮しないのであれば不要となる。

関連項目

• 条件付きコメント

外部リンク

• Webブラウザ別CSSハック＆フィルタTips - @IT
• CSSハックを使わずIEのバグに対処する方法 - All About
• CSS Filters – A fairly complete table of CSS hacks which show and hide rules from specific browsers. （英語）
• CSS Filters – CSS-only Filters Summary – More CSS filters.（英語）
• Filters and Cross-Over – CSS filters. Parsing errors marked red.（ドイツ語）