ちゃんと勉強してちゃんとマークアップしてるはずなのに、ブラウザによって表示に違いが出てしまう;;

なんて事がWeb制作してるとたくさんあります。
ってか無い時のが少ない><

特に日本だとIE6の普及率が異常に高いです。
他のブラウザ(IE7とかFirefoxとかOperaとかSafariとか)に比べるとIE6はWeb標準への準拠度が比較的低い為、ちゃんとマークアップしても色々と問題が起きてしまいます。
IE6だけでなく他のブラウザも多少問題を持ってます。

そんなバグに出会った時、各々のブラウザにのみ対応したCSSを分けて記述出来たら便利だと思いませんか?
それがCSSハックです。

CSSハックの多くは各々のブラウザのバグを利用して適用させたいブラウザのみ(または適用させたくないブラウザをはじく)事で問題が起きたブラウザへのCSSの対処を実現させてはいますが、あくまでバグを利用してのものですので、あまり使いまくらない方がいいです。

使わないですむなら、その方が優秀なコーディングですので、最終手段ぐらいに思っておきましょう。
でも使わないと出来ない表現もあるので、ある程度はお勉強しておきましょうw

アンダースコアハック

IE6のみにスタイルを適用させたい場合に使用するハックです。
使い方は簡単で適応させたいプロパティ冒頭に「_(アンダースコア)」を記述するだけ。
では実際の適用例を見てみましょう。

<p>サンプルテキスト</p>
p	{
margin: 10px 10px 10px 10px;
_margin_top: 5px;
}

上記のように記述すると、IE6以外のブラウザでは<p>~</p>のマージンを上下左右10pxずつとります。
IE6のみ上マージン5px、下左右10pxになります。
つまりはIE6のみ上書きしてるんです。

問題点:ただW3C CSS Validatorには通らないので、使わない方がいいっちゃいいです。

スターハック

「*(アスタリスク)」を使う事からスターハックって呼ばれてます。これもIE6のみにスタイルを指定したい場合に使います。

<p>サンプルテキスト</p>
* html p	{
margin: 5px 5px 5px 5px;
}
p	{
margin: 10px 10px 10px 10px;
}

こんな感じで記述します。まずスターハックを使用した方を記述してから、それ以外のブラウザに向けたCSSを記述します。
上記の記述だとIE6は上下左右のマージンを5pxずつ、それ以外のブラウザは10pxずつとります。

追記

今回はひとまずIE6向けのハックを書いてみました。
ただ前述のとおり、使用せずにサイトを構築出来るならそれにこした事はないので、あまり頼らないようにしましょう。
(僕はビギナーの時、ハックだらけでした^^;)

トラックバックURL

このエントリーのトラックバックURL:
http://www.cssmake.com/mt/mt-tb.cgi/17

コメント

コメントする

(初めてのコメントの時は、コメントが表示されるためにこのブログのオーナーの承認が必要になることがあります。承認されるまでコメントは表示されませんのでしばらくお待ちください)


画像の中に見える文字を入力してください。

pagetop