CSSハック
CSSハックは、ウェブサイトを制作する際に、異なるウェブブラウザ間での[Cascading Style Sheets]の解釈や実装の違いを調整し、可能な限り全てのブラウザで同じように表示させるためのテクニックです。CSSハックは、「CSSフィルター」とも呼ばれますが、特にInternet Explorer（IE）の独自拡張機能であるフィルタとの混同を避けるために、日本では「CSSハック」という用語が広く使われています。
W3Cの標準仕様に準拠してウェブサイトを構築すれば、理論上は各ブラウザでの表示の違いは最小限に抑えられるはずです。しかし実際には、ブラウザによってCSSのサポート状況が異なり、また、古いブラウザから新しいブラウザへの移行には時間がかかるため、表示の差異が生じてしまいます。特に、IE5.5以前のバージョン（IE6.0の互換モードも含む）では、ボックスモデルの解釈がW3Cの標準とは異なり、`width`プロパティの値にボーダーとパディングを含めて計算していました。これらのブラウザが大きなシェアを占めていた時期には、これはウェブサイト制作における大きな障害の一つでした。
この問題を解決する方法として、ブラウザ間の表示の違いが目立たないように値を指定する（例えば、ボックスモデルの問題であれば、ボーダーとパディングを共に0に設定する）などの方法が考えられます。CSSハックは、このようなブラウザの実装の違いを、CSSコーディングのテクニックを用いて吸収する方法の一つです。
具体的には、各ブラウザの実装状況やバグを逆手に取り、ブラウザによって異なるCSSの宣言を読み込ませます。しかし、ハックの中には、対象とするブラウザ以外にも影響を与えるものもあるため、そのような場合には、他のブラウザ向けに正規の方法で値を再指定することもあります。CSSハックの定義は曖昧で、一部のブラウザのみが実装しているセレクタを単に使用しただけのものをCSSハックとみなすかどうかは場合によります。
ブラウザのバージョンアップは常に続いているため、特定のブラウザを対象としたCSSハックは、そのブラウザのシェアが低下するとともに意味を失います。一方で、別のブラウザを対象とした新たなCSSハックが生まれる可能性もあります。また、ブラウザのバグを利用する性質上、サイト作成時には問題なく動作していたとしても、将来的に新しいブラウザがリリースされた際にバグが修正されることで、古いブラウザ向けの宣言が意図せず適用されてしまうリスクがあります。実際に、IE7のリリースによって、それまで有効だったCSSハックに問題が生じる事例もありました。さらに、CSSハックの中には、CSSの構文として妥当(valid)でないもの（Validatorでエラーと判定されるもの）も存在します。これらの理由から、CSSハックの使用に関しては様々な議論が存在します。
CSSハックには様々な手法が存在しますが、ここでは前述のボックスモデルに関する問題を解決するために用いられた「ボックスモデルハック」を紹介します。このハックは、2000年末にTantek Celikによって考案され、2006年10月に刊行された書籍『スタイルシートサンプル&リファレンス』では既に「今では使われなくなった古い裏ワザ」として紹介されています。
css
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以前のブラウザでは、最初の`voice-family`プロパティの箇所で読み込みが中断され、それ以降の宣言は無視されるため、最初の`width`プロパティのみが有効になります。一方、モダンブラウザでは、それ以降の宣言も読み込まれます。`width`プロパティを2回指定しているのは、Opera5にもIE5.5以前と同様の不具合があり、最初の`voice-family`プロパティで読み込みが中断される点と、IE6以前は子要素セレクタ（`html>body`の部分）に対応していない点を考慮したためです。Opera5の対応が不要であれば、2回目の`width`プロパティの指定は不要となります。
大藤幹『スタイルシートサンプル&リファレンス』
条件付きコメント
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.（ドイツ語）
CSSハックの概要
W3Cの標準仕様に準拠してウェブサイトを構築すれば、理論上は各ブラウザでの表示の違いは最小限に抑えられるはずです。しかし実際には、ブラウザによってCSSのサポート状況が異なり、また、古いブラウザから新しいブラウザへの移行には時間がかかるため、表示の差異が生じてしまいます。特に、IE5.5以前のバージョン（IE6.0の互換モードも含む）では、ボックスモデルの解釈がW3Cの標準とは異なり、`width`プロパティの値にボーダーとパディングを含めて計算していました。これらのブラウザが大きなシェアを占めていた時期には、これはウェブサイト制作における大きな障害の一つでした。
この問題を解決する方法として、ブラウザ間の表示の違いが目立たないように値を指定する（例えば、ボックスモデルの問題であれば、ボーダーとパディングを共に0に設定する）などの方法が考えられます。CSSハックは、このようなブラウザの実装の違いを、CSSコーディングのテクニックを用いて吸収する方法の一つです。
具体的には、各ブラウザの実装状況やバグを逆手に取り、ブラウザによって異なるCSSの宣言を読み込ませます。しかし、ハックの中には、対象とするブラウザ以外にも影響を与えるものもあるため、そのような場合には、他のブラウザ向けに正規の方法で値を再指定することもあります。CSSハックの定義は曖昧で、一部のブラウザのみが実装しているセレクタを単に使用しただけのものをCSSハックとみなすかどうかは場合によります。
ブラウザのバージョンアップは常に続いているため、特定のブラウザを対象としたCSSハックは、そのブラウザのシェアが低下するとともに意味を失います。一方で、別のブラウザを対象とした新たなCSSハックが生まれる可能性もあります。また、ブラウザのバグを利用する性質上、サイト作成時には問題なく動作していたとしても、将来的に新しいブラウザがリリースされた際にバグが修正されることで、古いブラウザ向けの宣言が意図せず適用されてしまうリスクがあります。実際に、IE7のリリースによって、それまで有効だったCSSハックに問題が生じる事例もありました。さらに、CSSハックの中には、CSSの構文として妥当(valid)でないもの（Validatorでエラーと判定されるもの）も存在します。これらの理由から、CSSハックの使用に関しては様々な議論が存在します。
CSSハックの例
CSSハックには様々な手法が存在しますが、ここでは前述のボックスモデルに関する問題を解決するために用いられた「ボックスモデルハック」を紹介します。このハックは、2000年末にTantek Celikによって考案され、2006年10月に刊行された書籍『スタイルシートサンプル&リファレンス』では既に「今では使われなくなった古い裏ワザ」として紹介されています。
css
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以前のブラウザでは、最初の`voice-family`プロパティの箇所で読み込みが中断され、それ以降の宣言は無視されるため、最初の`width`プロパティのみが有効になります。一方、モダンブラウザでは、それ以降の宣言も読み込まれます。`width`プロパティを2回指定しているのは、Opera5にもIE5.5以前と同様の不具合があり、最初の`voice-family`プロパティで読み込みが中断される点と、IE6以前は子要素セレクタ（`html>body`の部分）に対応していない点を考慮したためです。Opera5の対応が不要であれば、2回目の`width`プロパティの指定は不要となります。
出典・参考文献
大藤幹『スタイルシートサンプル&リファレンス』
関連項目
条件付きコメント
外部リンク
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.（ドイツ語）
もう一度検索
【記事の利用について】
タイトルと記事文章は、記事のあるページにリンクを張っていただければ、無料で利用できます。
※画像は、利用できませんのでご注意ください。
【リンクついて】
リンクフリーです。