CSSハックまとめ［2008年7月版］

備忘録として2008年7月現在、自分がWeb制作に使用しているCSSハックをまとめてみます。ブラウザによってはいくつもCSSハックの記述方法があるものもありますが、今回まとめたのは自分にとって最低限必要なものだけ。Firefox 2.0&3.0を表示の基準とし、CSSハックの対象にするブラウザはInternet Explorer 6.0&7.0、Opera 9.27&9.5、Safari 3.1です。

記述例はすべて<div>タグに対して通常のブラウザにはvisibility:hidden、CSSハック対象ブラウザのみにvisibility:visibleと指定した場合です。

Internet Explorer 6.0

2008年7月現在、最もユーザの多いブラウザでありながら最もCSS関連のバグの多いブラウザ。CSS Validatorに通る・通らないで2通りのCSSハックあり。

Not valid as CSS 2.1

div {
visibility:hidden;
_visibility:visible; /* アンダースコアハック */
}

Valid as CSS 2.1

div { visibility:hidden; }
* html div { visibility:visible; } /* スターハック */

Internet Explorer 7.0

IE7はIE6と違ってかなり優秀ですが、CSSハックが必要なシーンは少なからずあるはず。CSS Validatorに通ります。

Valid as CSS 2.1

div { visibility:hidden; }
*+html div { visibility:visible; }

Internet Explorer 6.0&7.0

CSS Validatorには通りませんが、IE6と7双方に一括で指定できるCSSハックもあります。

Not valid as CSS 2.1

div {
visibility:hidden;
*visibility:visible;
}

Opera 9.27

1世代前のバージョンのOpera。Opera 9.5がリリースされてまだ日が浅いので、一応まだOpera 9.27での表示確認もするようにしています。もうすぐOpera 9.27は切り捨ててよいと思います。

Not valid as CSS 2.1 (but valid as CSS 3)

div { visibility:hidden; }
html:first-child div { visibility:visible; }

Opera 9.5 & Safari 3.1

Opera 9.5に対するCSSハックはSafari 3.1にも適用されます。単にSafari 3.1用のCSSハックとして紹介されていることも多いですが、このCSSハックはOpera 9.5にも適用されるので気をつけて。

Not valid as CSS 2.1 (but valid as CSS 3)

div { visibility:hidden; }
body:first-of-type div { visibility:visible; }

Safari 3.1

Safariは優秀なのであまりCSSハックを使う機会はないと思いますが、Windows版もリリースされている最新の3.1のみCSSハックをあげておきます。Opera 9.5を対象ブラウザに考える場合、Safari 3.1専用のCSSハックはOpera 9.5&Safari 3.1向けCSSハックの後に記述してこれを上書きします。

Not valid as CSS 2.1 (but valid as CSS 3)

div { visibility:hidden; }
html:not(:only-child:only-child) div { visibility:visible; }

OperaやSafariのことも考えると、CSS 2.1としてvalidな書式にするのは無理です。僕はデザイナーらしくデザイン優先で考え、マイノリティなOS&ブラウザでもきれいに表示できるサイトを構築するために、CSSがvalidかinvalidかにはこだわらないようにしています（でも、CSS 3としてはvalidな書式でまとめられるはず）。

あと、WordpressでWebサイトを作るなら、IE6だけに読ませたいCSSはCSSハックを使うのではなくPHPでブラウザを判別してIE6だけ専用CSSで上書きしてあげてもいいと思います。なぜなら、 IE6に対するCSSハックは他のブラウザに比べて確実に多くなるし、近い将来IE6は切り捨てるべきブラウザとなるはず（なってほしい） だから。IE6のためだけにCSSのソース量を増やすより、思い切って最初から分けたほうがIE6を切り捨てる時も楽でいいと思います。

PHPでIE6だけにCSS（例はie6.css）を読ませるには、例えば次のようなPHPを記述します。

<?php if (ereg("MSIE", $_SERVER['HTTP_USER_AGENT']) &&
 !(ereg("Opera", $_SERVER['HTTP_USER_AGENT']) ||
  (ereg("MSIE 7", $_SERVER['HTTP_USER_AGENT'])))) { ?>
<link rel="stylesheet" href="ie6.css"  type="text/css" media="all" />
<?php } ?>

以上、CSSハック [2008年7月版] でした。

これらCSSハックを検証するためのページを作成しました。 http://higash.net/csshack/ をご覧ください。

できる限りCSSハックは使いたくないけど、 CSSを記述した通りに表示できないのはブラウザのバグであることも多々あるわけで、それだったら使わざるをえないよなぁ というのが現状。特にPhotoshopでデザインをまとめあげて、そのイメージをターゲットにHTMLとCSSを書いていくWebデザイナーにとっては、ブラウザごとのほんの数ピクセルのズレがすごく気になってしまうんです。

そんな時にCSSハックの出番なのだけれども、使えば使うほどCSSのソース管理が煩雑になるのは間違いないので、ご利用は計画的に。