CSSハック一覧表

下のソースの赤い部分がそれぞれの CSS ハックの部分です。

スターハック

WinIE4 〜 IE6 と MacIE4 〜 IE5 にだけ適用させられるスターハック。

*html p { /* for WinIE4 〜 IE6 and MacIE4 〜 IE5 */
	font-weight : normal;
}

CSS の書式としては正しくないようですが、CSS Validator ではエラーにならない。

アンダースコアハック

簡単に WinIE4 〜 IE6 にだけ適用させられるアンダースコアハック。使う時は「その他のブラウザ用」の指定より下に記述します。

.sample {
	width : 300px;/* その他のブラウザ用 */
	_width : 320px; /* WinIE4 〜 IE6 にだけ適用* /
	padding : 20px;
}

CSS Validator ではエラーになる。

Win IE4 〜 IE6 用の CSS ハック

Mac の IE には適用させずに Win IE4 〜 IE6 だけに適用させる為の CSS ハック。（ Mac 除けスターハック ※勝手に命名）

/* Mac IE から隠す \*/
*html p {
	font-weight : normal;
}
/* Mac IE から隠すの終わり */

CSS Validator でエラーにならない。

CSS xmlns 属性ハック拡張型

Safari2（サファリ２）だけに適用させる為の CSS ハック。（ Safari2 ハック ※勝手に命名）

html[xmlns*=""] body:last-child p { /* for Safari2 */
	font-weight : normal;
}

CSS Validator ではエラーになる。
2008/01/12 追記） Safari3 では使えなくなっているので注意です。

Safari3 に未知の CSS 疑似要素

Safari3（サファリ３）だけに適用させる為の CSS ハック。（ Safari3 ハック ※勝手に命名）

body:first-of-type p { /* for Safari3 */
	font-weight : normal;
}

CSS Validator ではエラーになる。

Opera 用の CSS ハック

Opera（オペラ）だけに適用させる為の CSS ハック。（ Opera ハック ※勝手に命名）

*+html:first-child p { /* for Opera */
	line-height : 150%;
}

CSS Validator でエラーにならない。

Safari2 と Opera9 用の CSS ハック

Safari2 と Opera9 だけに適用させる為の CSS ハック。（ Sapera ハックもしくは Operi ハック ※勝手に命名）

html:first-child p { /* for Safari2 and Opera9 */
	line-height : 150%;
}

CSS Validator でエラーにならない。
2008/01/12 追記）Safari3 には適用されないので Safari2 を視野に入れないのなら Opera9 用のハックとして使えます。

IE7 用のハック

IE7 だけに適用させる為の CSS ハック。（ IE7 ハック ※勝手に命名）

*:first-child+html p { /* for IE7 */
	font-weight : normal;
}

CSS Validator でエラーにならない。

IE7 用のハック（ Opera9 も）

IE7 だけに適用させる為の CSS ハック。（ IE7 ハック２ ※勝手に命名）

*+html p { /* for IE7 */
	font-weight : normal;
}

CSS Validator でエラーにならない。
2008/01/12 追記）XML 宣言があると Opera9 にも適用されます。

IE6 以外のモダンブラウザ

IE6 以外のモダンブラウザ（ IE7 含む）に適用させる為の CSS セレクタ。（仲間はずれの IE6 ハック※勝手に命名）

html > body p { /* Win IE6 以外のモダンブラウザに適用 */
	font-weight : normal;
}

CSS Validator でエラーにならない。

※当サイトのモダンブラウザの確認には下記ブラウザを使用中。
Windows : IE7・IE6・FireFox2・Opera9・Netscape7
Macintosh : Firefox2・Safari3・Opera9・Netscape7

以上が使用したことがある、または知っている CSS ハック一覧です。上記した以外にも CSS ハックは探すと他の方法も見つかると思います。また、ハックと呼べるものと呼べないものも区別していません。

CSS ハックの下に記述した Validator でエラーになる・ならないの意味が分からない方は、あくまで主観ですがあまり気にしなくても良いと思います。W3CでCSSの検証をした時にエラーになると言う意味です。

それよりも CSS ハックはブラウザのバージョンが変わるとハックとしての機能が失われる可能性があります。なので、なるべくなら使わないで済ませる方が良いと思います。

次のエントリでは CSS ハックとサヨナラ、もしくは上手に付き合う方法をご紹介します。興味のある方は CSSハックとサヨナラもしくはハイタッチをご覧ください。