[全体] [技術メモ] [blog製作記録] 各一覧の該当ページへ

Mac用css実装

[技術メモ/ blog製作記録] 2008年4月19日(土曜日) 21:52

safari3が相対サイズ指定時のフォントが大きい事に対応するため、先ず、Macにのみ専用cssが追加されるようにしました。

Mac用cssはオーバーライドで実装

私のコーディングの癖でもあるのですが、Mac用cssはオーバーライドで実装するのが好きです。
windows用と完全に分けてしまうのではなく、windows用(共通用)を読み込んだ後に、Mac用を追加で読み込み、上書する方法です。

テーマレベルで実装

他のテーマ(スキン)に影響を及ぼさないためにもテーマレベルで実装する事にしました。
header.phpの</head>直前に以下を追加
 <?php $agent = $_SERVER['HTTP_USER_AGENT']; ?>
 <?php if (ereg("Mac",$agent)) : ?>
 <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style-mac.css" />
 <?php endif; ?>

ガサツな気もしますが、とりあえずよし。
これで、Macの場合のみstyle-mac.cssが追加で読み込まれます。

safari3指定はcssレベルで

ユーザーエージェントまで見ておいて、safari3はcssハックかよwww とも思います。
将来的にcss分岐のif文が伸びる気持ち悪さと、cssハックの気持ち悪さを天秤にかけ、cssハックにしました(ノ∀`)
この辺の解説によると、以下のcssなら、将来新しいブラウザに悪い影響を及ぼしにくいと考えられるらしいとかなんとか。
と言う事で、Macにのみ適用するcssへ加えてみました。
@media screen and (-webkit-min-device-pixel-ratio:0){
body {
font-size:0.78em;
}
}

safariにはちょくちょく煮え湯を飲まされており、実は嫌いなブラウザの一つです。(いつの間にか3に上がって結構、癖が変わっていたり等々)とは言え、Mac標準ですのでターゲットからは外せず。

Comments (1)

1件のコメント

  • ピンバック by 近頃の、とあるR。 » Mac用CSS 2008 年 7 月 28 日 21:23

    [...] Mac用css実装 の際は、「MacだとSafari3だけフォントが大きくなる」と理解していました。これは逆で、Safari3が正常だったのですね。 Winに比べてMacのFireFox2やSafari2あたりは、若干小さく表示 [...]