MacとWindowsのブラウザーでCSSを振り分け Mac版Firefoxが残る課題
MacとWindowsのブラウザーでCSSをJavaScriptで振り分け の続編です。
SEO塾セミナーを受講された方から、温かいアドバイスをいただきました。
WebKit系のハックと、最後はMacのFirefoxのフォント設定
まず、IE6で崩れていたみたいで、それを修正したCSSソースをいただきました。
また、当然MacでJavaScriptを切っていた場合はアウトですから、CSSハックだけで間に合うような方法を示していただきました。
letter-spacing: 1px; に注意！
なお、ホームページ版のテンプレートをお使いの方は、CSSの最初の方の
letter-spacing: 1px;
にご注意です。
Windowsだけで表示確認されているすべての方も同様です。
さて、いただいた案のほとんどを採用させていただくと同時に、やはりWindowsのブラウザーでは、上記の文字間スペースがかなり見栄えがよくて、しかも自分でも視認性が高まるわけですから、最後はMacのFirefoxに泣いてもらうことにしました。
Macのヒラギノ
まず、WindowsやMacがOSとして最初に使うフォントが問題だったようです。
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",sans-serif;
Mac向けのフォント指定は、ほとんど上記のようにやっていると思います。
ヒラギノ角ゴシックはやはり美しく、Macの画面はClear Typeとは比較になりません。
とはいえ、和名と英名と併記する鬱陶しさ… これはMacだけではありませんが。
またWindowsでは、私の好みとして
font-family: "Lucida Sans",arial,MeiryoKe_PGothic,"メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
こうなります。
「Lucida Sans」は英数字を整え、「MeiryoKe_PGothic」はメイリオの行間を狭くするものです。後者は検索すると製造法？が出ます。お試しください。
「WebKit」ベースのChromeとSafariだけ対象のCSSハック
さて、Google ChromeとSafariは「WebKit」をベースとしていて、このCSSハックを発見しました。
@media screen and (-webkit-min-device-pixel-ratio:0){
body{
letter-spacing: normal !important;
}
}
なんとも理解不能なコードですが（笑）、こうしてMac版のChromeとSafariは手当てできました。
もちろん、Windows版のChromeとSafariも巻き込まれるのですが、文字間は狭くなったものの視認性がいちじるしく悪いことはないようです。
Mac版FirefoxはそれでもJavaScriptで…
しかし、常用するWindows版Firefoxの表示を優先すると、どうしてもMac版の方が犠牲にするしか、私にはスキルがないです…
html>/**/body {
letter-spacing: normal;
}
JavaScriptでMacにだけ別途CSSを読み込ませ、そこにIE8以降とFirefox向けのCSSハックコードを書いています。
これで最後のMac版Firefoxも、崩れなくなりました。
つたないWeb作法ですが、お役に立つ場合もあるでしょうから…
関連記事:
コメントを書き込む