CSSハック

出典: フリー百科事典『ウィキペディア(Wikipedia)』
移動: 案内検索

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

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

概要[編集]

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により考案されたもので[1]、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を考慮しないのであれば不要となる。

CSSハック以外のテクニック[編集]

以降はCSSハックには分類されないが、ブラウザ間での表示の違いを吸収する、あるいは適用するCSSを振り分けるためのテクニックである。

Netscape Navigator 4.x対策
link要素やstyle要素のmedia属性で"screen"以外の値("screen,tv" など複数の値も含む)を指定すると、Netscape Navigator 4.xはそのCSSを読み込まなくなる。NN4.xはCSS解釈に問題が多いため、全く適用させない(あるいは最小限のスタイルのみ適用させる)手段として多く用いられる。NN4.xは他に*(全称スタイル)や「要素名#id」でのスタイル指定にも対応していないため、これらを使って切り分けることもできる。
@importの利用
CSS内で@import規則で別のCSSをインポートして使用する際、IE4.xは一部の指定方法に対応しておらず読み込まれない。やはり不具合が多いIE4.x対策に用いられる。
@import import.css; - Windows版IE4.x、Macintosh版IE4.0を除外
@import url("import.css"); - Macintosh版IE4.5を除外
条件付きコメント
Internet Explorer5.x以上の独自拡張の条件付きコメント[2]を利用することで、IEのバージョンに応じたCSSを読み込ませることができる。マイクロソフトのIE開発チームはCSSハックの代替として条件付きコメントを使用するよう要請している[3]

出典・参考文献[編集]

[ヘルプ]
  1. ^ 有坂 陽子、長谷川 恭久 『スタイルシート スタイルブック』、2004年2月ISBN 978-4798105857
  2. ^ 条件付きコメント
  3. ^ IEBlog – Call to action: The demise of CSS hacks and broken pages

外部リンク[編集]