CSSハック

• 文字サイズを縮小
• 文字サイズを拡大
• 元の文字サイズに戻す

1. スタッフブログ
2. 業界ブログ
3. 業界ポッド？

XHTML+CSSでコーディングでは、同じHTMLをいろんなブラウザでチェックする作業が不可欠です。
ブラウザ間で表示が違うからです。

大まかにいうと、IE系とその他のブラウザで違ってきます。
さらにIE6とIE7、IE8のIE同士でも見え方が違うので、その表示差異をあわせるのに一苦労です。

通常、同じように表示されるようHTMLやCSSの書式を調整しますが、
どうしても合わせられない時が出てきてしまいます。
そんな時は、CSSハックを使って表示差異を吸収するときがあります。

CSSハックとは、CSSの書き方を少し変更して、特定のブラウザのみにCSSを有効にしたり、
無効にしたりする書式です。もっとも有名なCSSハックにスターハックがあります。

// CSSソース //＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

.header {
    float: left;
    margin-left: 20px;
}
* html .header {
    margin-left: 10px;
}

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

2つ目の“* html ～”から始まるのがCSSハックを使った書式です。
適用したいidやclassの頭に“* html ”をつけます。(*とhtmlの間は半角スペースが入ります。)
このスターハックでは、Windows版 IE4～6、Mac版 IE4～5のみに有効なCSSを書くことができます。

ちなみに、上記のCSSでは、IE6の“ダブルマージンバグ”が発生してしまい、表示が崩れます。
(ダブルマージンバグについては次回エントリーで書きます。)
それを、つづくCSSハックで表示差異を修正しているのです。

CSSハックは何種類もあり、その書き方と有効になるブラウザを覚えるのも大変なほどですが、
もっとも表示差異の激しいIE6以前用のスターハックを覚えておけば、半分くらいはカバーできると思います。
(書き方にもよるけどね。)

ちなみに、CSSハックにはW3Cの提唱するバリデーターに通らないものもありますので、
できるだけバリデーターに通るCSSハックを適用するのがいいでしょう。
(今回紹介したスターハックはバリデーターに通りますよ。)