bodyに指定するfont-sizeやfamilyなど
以前エントリーした記事、IE8とIE7はメイリオ、IE6/FFはMS Pゴシック、Mac Safari/FFはヒラギノ角ゴを表示から早くも3年近く経っている事にびっくりしました。ブラウザに関する事情は大きく変わってIEの最新版は9で現役のIEは6〜9(IE6を排除するサイトもだいぶ増えましたが)加えてChromeのシェア上昇、Safariは5に、Firefoxに至っては12!でブラウザが乱立する状態になっています。
これだけブラウザの進化が早いと出来る限りハックは使わず...と言うのが安全策だと思います。
どうしても使う場合は極力シンプルに!と言う事で以前はセレクタハックを使っていたのですが、プロパティに記述するハックに切り替えてます。
※基本bodyに指定するフォント関連でのみ使用し、他の場所では極力ハックは使わないようにしています。決してハックを推奨する記事ではありません。
CSS Code
body {
font-family: Verdana, Arial, Hiragino Kaku Gothic Pro, "ヒラギノ角ゴ W3", Osaka, "MS Pゴシック", sans-serif;
font-size: 13px;
font-family: Verdana, Arial, "メイリオ", Meiryo, "MS Pゴシック", sans-serif\9;
font-size: 82%\9;
_font-family: Verdana, Arial, "MS Pゴシック", sans-serif;
_vertical-align: baseline;
color: #333;
}
body:not(:target) {
font-family: Verdana, Arial, "メイリオ", Meiryo, "MS Pゴシック", sans-serif\9;
font-size: 82%\9;
}
\9ハックはIE8以下のブラウザにスタイルを適用するハックです。IE9はこのハックは適用されませんので:not(:target) { color: #333\9; }
と記述する事によりIE9に適用されます。
_ハックはIE6のみに適用されるハックです。
セレクタハックを使うより記述がシンプルだと思います。ちなみに僕はSassを使っているので、こんな形で記述しています。
@mixin font-main {
font: {
family: Verdana, Arial, Hiragino Kaku Gothic Pro, "ヒラギノ角ゴ W3", Osaka, "MS Pゴシック", sans-serif;
size: 13px;
}
}
@mixin font-ie {
font: {
family: Verdana, Arial, "メイリオ", Meiryo, "MS Pゴシック", sans-serif\9;
size: 82%\9;
}
}
@mixin font-lte-ie6 {
_font-family: Verdana, Arial, "MS Pゴシック", sans-serif;
_vertical-align: baseline;
}
body {
@include font-main;
@include font-ie;
@include font-lte-ie6;
color: #333;
&:not(:target) {
@include font-ie;
}
}
これがコンパイルされると先述したCSSコードになります。