CSSハック

最近のブラウザで使えそうなCSSハック

使う機会は滅多に無いんだけど、知識として知ってないと困ったりしたので、取りあえず現在主流だろうブラウザのハックを自分のまとめ用に。

実際の状況を確認出来るように、デモページもご用意しました。
必要あるか分かりませんがダウンロードも出来るようにしときました。
拡張子がshtmlとかなってるので、htmlにして下さい。

clearfix

通常、floatさせている画像やボックスなどがある場合何らかの形でclearするか、その親要素にfloatを指定しないと、親要素からはみ出してしまいます。

コレはCSS2.0の仕様なんで正しい表示なんですが、どうしても親要素にfloatなどが使えず、やむなくclear:bothをbrなりdivにクラス指定して解決してたりって事があったかと思います。

IEの場合はwidth、もしくはheightを指定する事で解決できますが、コレはバグなんで他のモダンブラウザでは解決できません。

ソコでかなり便利に使えるテクニックが、clearfix。
使い方は、clearしたい親要素に下記のように記述。

div:after {
	content: ".";
	display: block;
	visibility: hidden;
	height: 0.1px;
	font-size: 0.1em;
	line-height: 0;
	clear: both;
}

IE7はコレに対応していないので、IE7用に、

div {
	display: inline-block;
}

と指定するか、IE独自拡張のzoomを使っても回避できます。

div {
	zoom: 100%;
}

:after擬似要素を利用してclearします。
コレ考えた人頭いいなーと思います。

とてもボクじゃ考え付かない...

そういえばclearfixとは直接関係が無いですが、height:1%を使いIE対策としてはみ出さないようにしたり、peek-a-booバグ対策でheightを指定している場合、IE7だとその辺修正されているので、場合によってはIE7だけすんごい事になっているかも知れません。

heightの使い方には留意した方が良さそうです。

子セレクタ「>」を利用したハック

IEが子セレクタに対応していないというのを利用したテクニックです。
一番最初に覚えるべきハックとも言えるほど、便利なハック。

やり方

div#g_navi ul {
 margin-left:-5px;
 width:600px;
}
/*IE以外に...*/
div#g_navi > ul {
 margin-left:0;
}


↑こんな感じで、IE用の値を書いた後に、IE以外用の値を子セレクタを使って書きます。

上記のサンプルでは、「floatで左右どちらかに寄せているボックスに、marginの値を指定するとIE5.x/IE6の環境下で、指定値の2倍程度のmarginが設定される。」バグ対策として使ってます。

アンダースコアハックと逆ですが、アンダースコアハックはCSSの書式的にはダメなので、W3C CSS ValidatorでErrorになります。

子セレクタは、IE6が対応してないっていうだけで、悪い事なんてない正しい書き方ですので、ボクはじゃんじゃん使って良いと思います。
（使わずに回避できるならその方が勿論良いですけど。）

確か、MicrosoftのIE開発チームが「悪いハック」として書いていたと記憶しておりますが、IE6が対応してないだけで時期IE7が正常にCSSを解釈してくれるのならば、カスケード処理の規則通り上書き処理されるので何の問題も無いハズです。
IE6はIE7が正式リリースされてもスグに切り替わる訳も無いので、当分は必要になってくると思います。


個人的には、この子セレクタを利用したハックだけ覚えておけば困った時大抵対処出来ると思ってます。

アンダースコアハック

CSS覚え始めの頃、多様していたハックがアンダースコアハックです。

アンダースコアハックとは、Win版IEのみ適用させたい時に使います。

コレは、IEのバグを利用したテクニックで、プロパティの前に特殊記号などが記述されていた場合でも読み飛ばして通常と同じように解釈してくれます。

記述方法はいたって簡単。
プロパティの前に　_　を置くだけ。

使いどころとしてはかなり多様で、IEだけ表示がおかしい時には何かと便利に使えます。
例えば、

.hoge {
	border-top:1px solid #CCC;
	margin:1px 10px 20px 0;
	_margin-top:0;
}

などのように、記述すればIEだけmargin-topが0になります。
IEには、互換モードの時に、

ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう

というバグがあるので、バグにはバグで対抗するって感じですね。

一応、ご注意としてアンダースコアハックは、W3C CSS ValidatorでErrorになりますので、多様はしない方がいいです。
あと、IE7ではもちろん修正されているので、他モダンブラウザ同様無視されます。
IE7の表示が標準通りなら無視されてくれないと困るわけですが。

と、アンダースコアハックについて長々書いてしまいましたが、ハック自体、使わずに済むのならソレが一番良いと思います。

ボクも出来るだけ使わないよう気をつけてます。

Hollyハック

よく使うハックをメモしようと思ったのですが、MacIE5用のハック以外あまり使う機会がないですね。

現在でも、未対応で作成しているサイトも見かけますが、
完全に対応しなくていいよ。と早く世間的に言われるようになって欲しいものです。

/*--------------------MacIE5*/
/*\*//*/
@import url(mac_ie5.css);
/**/

別名で、バックスラッシュハックと呼ばれてるハックですね。

↑上に行くよ