各ブラウザの仕様を利用し、CSSによる記述を特定のブラウザだけに対応させる手法のことをCSSハックいいます。

それはもちろん、CSSハックなんて使わずに構築したほうが至極当然ベストなんですが、(もしブラウザ修正なんかされたらまた直さなきゃならないですし)どうしても表現上の問題などで必要となってくる場面がたまに出てきます。
ハック自体はたくさんの数がありますが、僕が必要と思うものだけピックアップ致します。ご参考までに。

IE4~IE6・MacIEのみに適用する
* span { margin: 10px; }
主にIE6以前に適応したい場合に。最近はもうほぼ使わずとも大丈夫になりました。

IE7のみに適用する
*: first-child-+html span { margin: 10px; }
あまり機会は無いですが、たまーに必要な時が。

MacIE5のみに適用する
/**//*/
span { margin: 10px; }
/**/
問題児、MacIE5さんを考慮して組む場合、少なからずお世話になってしまいます。

[番外]スタイルの適応順位を最優先する
span { margin: 10px !important; }
普段なら後述されたスタイルが優先されますが、この記述をするとその要素が優先されます。連発注意。

[番外]印刷時のみスタイルを適用する
@media print { span { margin: 10px !important; } }
印刷時、外枠などを消したい場合などに。対象を display:none; してあげれば簡単です。

IEさんも、7、8となってきて、その他ブラウザと表示での差異が少なくなってきました。FirefoxやSafari、Opera用にもハックはあるようですが、どれもこれも使ってしまうと当然訳わかんなくなってしまいます。(一番普及しているIEに対して使わざるを得ないというのが皮肉ですが)

緊急時などにも重宝すると思いますので、一通り覚えておいて損はないかと!

2009.06.02|Nishikiori

関連記事

コメント