CSS HACKとは、各ブラウザのバグや仕様(解釈の違い)を振り分け条件に利用することで、特定のブラウザのみに適応されるCSS記述を行う方法です。スターハック、アンダースコア、Hollyハック(バックスラッシュハック)などと呼ばれるものがあります。

CSS HACKはユーザの利用環境によって製作者が意図した通りに表示されない可変式のメディアであるWEBメディア特有の2001年に公開されたInternet Explorer(以下、IE)6などの古いタイプブラウザと2004年に公開された次世代型ブラウザとされるFirefox、Safariなどの新旧技術の混在から生じたものと考えられます。

CSS HACKはJavaScriptによるブラウザ振り分けを必要とせず、各ブラウザごとにCSSファイルを用意する必要がないために便利ですが、ブラウザのバグを利用していることが多くCSSの解釈に関するバグ修正によるアップデートがあった場合、その後の視覚表現を保障できるものではないためオススメできません。

2004年頃からWEB業界は標準化団体・W3Cが規格化を行う技術仕様に合わせたHTMLコーディングが行われつつあります。CSSは新しい技術ではなくCSS Level 1は1996年の12月に勧告されていますが、それ以前のブラウザでは視覚表現を定義するCSS規格に準拠しているものが少なく、CSSのみでは希望通りのデザインやレイアウトが再現できなかったためにテーブルタグが多用されていました。

CSS規格に準拠した次世代型ブラウザの登場により本来、表用のタグであったテーブルをレイアウトのために使用するのではなく、文書構造のためのHTML、視覚表現のためのCSSと本来の役割に戻ったとことになります。また、ソースを簡略化することで検索エンジン最適化(SEO)対策があると考えられています。

1. float問題

   テーブルタグに変わりCSSでコーディングされW3Cに準拠しつつありますが、オブジェクトを回り込ませる命令であったfloatがコラム エリア表示として本来の目的とは異なる使用方法が生まれました。これはCSSにコラム表示のための命令がないために起こる問題であると考えられますが、CSS初心者にはfloatなど各ブラウザごとのCSSの仕様に慣れる必要があります。

特にIE6は一部はWEB標準に準じているものの、一部の独自のCSS命令やCSS解釈を持っておりIEで表示チェックを行いながら制作するとFirefoxで表示確認した際にレイアウトが崩れることがあります。しかし、2006年10月18日に公開されたIE7ではWEB標準に準拠するように解釈の変更がなされているためにIE6以前のブラウザとIE7ではレイアウトが崩れることがあります。このような場合は、

1. IE7より以前のIEでのみに特定のCSSファイルを読み込ませる

   <!--[if lt IE 7]><link rel="stylesheet" href=hoge_ie.css" type="text/css" /><![endif]-->

2. IE7のみに特定のCSSファイルを読み込ませる

   <!--[if IE7]><link rel="stylesheet" href="css/hoge_ie7.css" type="text/css" /><![endif]-->

と、することで対処できます。