Go my way

フォントサイズを指定する際、絶対単位を使う人は少ないと思います。絶対単位で指定すると、IEでフォントサイズの変更ができなくなるためです。そこで、フォントサイズに関するCSSハックをまとめてみました。

今まではユニバーサルセレクタですべてのフォントサイズを100%に揃え、そこを基点に指定を行っていました。

* {
    font-size: 100%;
}
p {
    font-size: 80%;
}

これでも問題はないのですが、巷(？)ではハックを使って指定する人が多いみたいです。

body {
    font-size: 13px; /* モダンブラウザ向け */
    _font-size: x-small; /* IE向け */
}

この方法では、1行目でIE以外のブラウザに13pxを適用させ、IEにはアンダースコアハックで別指定を行っています。!importantハックを使っても同じことができます。

body {
    font-size: 13px !important; /* モダンブラウザ向け */
    font-size: x-small; /* IE向け */
}

これで一件落着かと思いきや、IE 7でつまづきます。IE 7では(バグが修正されたため)これらのハックが効かず、13pxの値を適用してしまいます。しかし、絶対単位で指定するとフォントサイズが変更できないバグはそのままです。要するに、IE 7ではフォントサイズの変更ができなくなるのです。

これを解決するにはアスタリスクハックを使います。

body {
    font-size: 13px; /* モダンブラウザ向け */
    *font-size: small; /* IE 7向け */
    *font: x-small; /* IE 6以下 */
}

1行目はモダンブラウザに対する指定で、2行目でIEに別指定を行います(この時点では、すべてのIEが読み込みます)。次に3行目で、IE 6以下の指定を行い、samllを上書きしx-smallを適用させます。

ショートハンドであるfontプロパティは、font-sizeとfont-familyの値は必須です。よって、3行目の指定は不正なプロパティとなり、仕様に準拠したブラウザでは無視されます。なので、IE 6の互換モードでは上記の不正なプロパティを読み込み、適用されるわけです(IE 6でも標準準拠モードでは無視します)。

ちなみに、これらのハックは文法違反です。気になる人は、文法違反にならないハックを使いましょう。たとえば、こんな感じです。

body {
    font-size: small !important; /* IE 7向け */
    font-size: x-small; /* IE 6以下 */
}
html>/**/body {
    font-size: 13px; /* モダンブラウザ向け */
}

この方法だと文法違反にはなりませんが、ルールセットが増えて管理が大変になります。好みで使い分けてください。

※pxは絶対単位ではありませんが、ほとんどのブラウザで絶対単位として解釈されます。

Tag

CSS, Hack, IE