前のPostで書いたCSSのフォントのなんぞをちょっとアレしたやつを書く。ブラウザによって表示が異なるアレね。

http://stystk.com/test/chrome-safari-font.html

まぁ↑のdemoにある通りなんだけど、SafariとChromeでフォント表示が違う。
FirefoxとChromeはWin/Mac共に上が明朝で下がゴシック体表示になった。Mac版Safariは上がゴシック体で下が明朝体。Win版Safariは上下共ゴシック体。OperaはWin/Mac共に上下とも明朝体。IE8は上下ともゴシック体。IE9は互換モードだと上下ともゴシック体、標準モードだと上明朝体で下ゴシック体。(thx @sabotenbrother)

GoogleWebFontsのVollkornを読み込んでる。上のが{font-family:Vollkorn,serif;}、下のが{font-family:Georgia,sans-serif;}。
Mac版SafariはWebFontsを使った場合(上の場合)、そのフォント内にない文字(この場合和文)を表示する場合はserif指定とか無視して、ヒラギノが強制的に使われるのかな。で、Mac版SafariはGeorgiaを指定している場合の和文は、sans-serif指定を無視してヒラギノ明朝が強制的に使われるようになってるのかな。

あとでもうちょっと調べてみようと思う。→とりあえずザーっといろんなブラウザでチェックした。あとはCSSの仕様とかか…面倒くさいな…というか仕様にあるのかな…チェックした限り、割とバラバラだし…
なんとなく、FirefoxとChromeの表示が正しいような気はしてる。
正しさとは何かね。君の言う正しさとは。 

実例: Twitterのtweet表示のページとか、 http://hail2u.net/404.html とか。

ふと、TumblrのPageでCSSとかJavaScript書いたらどうなるか試してみた。

まぁ案の定Content-Typeがtext/htmlだった。おまけにファイルの頭に「<meta http-equiv=”x-dns-prefetch-control” content=”off”/>」って自動挿入されちゃうから普通に読み込むとSyntax Error。PageのURLに拡張子付けたらうまいことやってくれたりしたら嬉しかったんだけど、世の中そんなに甘くなかった。

でまぁいろいろやってたら上の自動挿入の条件がわかった。「</head>」の直前もしくはファイルの頭に挿入されるっぽい。headタグ省略したらdoctypeより前に挿入されちゃうね。
これをうまく利用すると、自動挿入タグをコメントアウトできる。「/*</head>*/」ってファイルの頭かケツに書いとくといい感じ。

がしかし、Content-Typeの件はどうにもこうにもどうにもならぬ。試しにHTMLに<script src=”…”></script>とか<link rel=”stylesheet” href=”…”>って入れてやってみた(Safari, Chrome, Opera, Firefoxでテスト)ら、JavaScriptのほうは警告は出るけど動いた。CSSはダメだった。どうやらIE以外のブラウザはtext/htmlなCSSはダメみたいね。

というわけで、TumblrのPageでJavaScriptを書いてどっかに「/*</head>*/」って書けばHTMLに読み込んでも警告は出るけど動くというなんとなく気持ちの悪い結末。

Read More

@font-face{
	font-family:"Osaka";
	src:local("Hiragino Kaku Gothic ProN W3"), local("Hiragino Kaku Gothic ProN");
}
@font-face{
	font-family:"Arial Unicode MS";
	src:local("Hiragino Kaku Gothic ProN W3"), local("Hiragino Kaku Gothic ProN");
}

割とブログなんか見てたりするとCSSのfont-familyにOsakaが指定されてて、うわー…ってなることがあるんだけど、ぼくはユーザースタイルシートに上のやつ入れてる。これでOsakaとはオサラバ。あと、Arial Unicode MSはなんか日本語の字体がおかしいんだよね(Macだけかな)、だからこれも。

基本的にWebのもの作る時はMacで作ったあと、VMWare Fusion上のWindows XPのIEでチェック、問題があれば修正って流れでやってる(みんなも？)。
で、Windows上でたまにIE以外のブラウザもチェックしたりするんだけど、なんかおかしいの出たのでメモっとく。

Windows版のGoogle Chromeで見た、このサイトのFooter。
backgroundに-webkit-gradientを使ってるんだけど、見事におかしなことになってる。リンク要素にマウスオーバーするとその要素のみ、backgroundが出てくる。謎。Windows上のGoogle Chromeのみでの現象。VMへのメモリ割当が少ない(300MB程)のが悪かったりするのかな？

Windows版Safariでフォントにアンチエイリアス掛けるとLucida Grandeがなんかおかしくなる。
右上の「Search」のところ。フォントのディセンダが通常のWindowsのフォントレンダリング時と比べて大きくなっている。Safariが自前で持ってるLucida Grandeのフォントの問題なのかな。ちなみに通常のフォントレンダリングはこんなん↓

他にもスクリーンショットは取ってないけど、Safari/Chromeでinput type=”search”のデザインがなんかおかしかった。少なくともMac上のSafari/Chromeとは全く違うものになってる。ので、Windows上ではinput type=”search”は使わないようにした。
box-shadowもなんか違う感じだった。

Firefoxはこういうとこ優秀だなーと思う。

ちなみに、問題の解決はしてない。ほったらかしー。

なんか飽きてきたので、見た目変えました。数日前。

今回は簡素な造りになってるんだけど、ここに到るまで随分時間が掛かった。ほぼ出来上がりのものを4、5回作り直した…。最初に考えていたものとは全く違うものになってしまったけど、シンプルになったからこれでよし…かな…。まぁ当初考えてた「ワイド画面が主流やねんから、横をもっと有効利用せなアカンな！」とは全く逆方向に行っちゃってるんだけど。むしろ縦が狭くなった。なにこれ。なにやってんのよ。

前のテーマファイルを使って作り直したんだけど、コードは随分と少なくなった。削ってくばっかり。JSON読み込んでうんたらほんたらとかなくなったしね。css/jsはほとんど書き直し。jsは今もちょこちょこ追加・修正中。
使ってるライブラリ等は、jQuery, uuAltCSS, dynamic gradient backgroundと、YUI Reset/Fonts CSS(現時点)。IEでの表示にはuuAltCSSに頼りっきり。ほんとすごいなぁこれ。非IEではCSSGradientが使えない環境の場合、dynamic gradient backgroundを使ってグラデーションさせてる。CanvasのtoDataURL使ってbackground-imageに突っ込んでるくさいから違和感無いね。生成の負荷も軽いっぽいし。
今回もインターフェースには画像ファイルを使わずにCanvasで(ほぼ無いけど)。SVG使おかなと思ったけど、そもそも画像をあんまり使わないし、CanvasだったらuuAltCSSにuuCanvas入ってるから、別途SVGのIE向けライブラリ(SIEとか)読み込まなくて済むからね。
あ、全部uuAltCSSでやればいいのかなぁ。

それと、やっとAutopagerizeに対応させた。以前気持ち悪いとぼやいてたrel=”next”だとかの件はSITEINFOで回避。

あとは、Footerなんとかしよ。

もうひとつ、一年くらい前に作って放置(開発環境に)したままのiPhone用テーマもビシっとさせてこっちに持ってこよ。またApplicationCacheとか使お。つかiPhoneのSafariで、metaに何か書いたらorientationしないモードみたいになんないかなぁ、そろそろ。あと、position:fixed;とかー。そしたらもっとSafariが活きてくると思うんだけどなー(Flash対応よりも)。

CSS3のborder-radiusを、ブラウザ毎に味比べ。

・Firefox 2 Windows

・Google Chrome 2.0.172.23 Windows

・Google Chrome 3.0.182.3 Windows

・Firefox 3.5b4 Mac

・Safari 4b(5528.17) Mac

・Chromium 2.0.181 Mac

・Firefox 3.0.10 Mac

と、結構品質に差があるね。特にFx2のはなんかスゴいね。まぁ、もう使ってる人そんなにいないと思うからいいけども。Chromeはもうちょい頑張って！

スクリーンショットが少ないのはなんかのついでに撮ったやつだから＞＜
色がバラバラなのはカラーマネージメントのせいかな。

追記: 090530
Google Chrome 3.0.182.3を追加。変わってねぇ。

ちょっと面白いの発見したのでメモ。

Google Chromeでcssにtext-shadowを使うとフォントがアウトライン表示される。text-shadow:0 

わぁ！みんなみんなー！待望のIE8がリリースされたよー！やったね！インクレディブルだね！相変わらず最高の出来だな！ファック！

で、忘れそうなのでメモ。

BetaとかRCとかでちゃんとチェックしてなかったせいで、レイアウトがややズレてる…。というわけで、修正しようかと思ったんだけど、「あれ、オレ、IE7標準準拠でレンダリングされるようにMETAタグ書いてたよなー」と思い出した。やっぱりちゃんと書いてる。「<meta http-equiv=”X-UA-Compatible” content=”IE=7″ />」ってhead内に書いてる。書いてるのに、IE7での表示とはかけ離れてるってことは、そのタグが効いてないってことなので、ちょっといろいろちょっとしてみる。

判明: cssとかjsとか読み込むとこよりも先に書いてなきゃ無視されちゃう

ということでした。</head>の直前に書いてたからズーって感じだったみたい。うっかりさん。あー。

見た目変えました。

当然、毎度の通り作ってる途中です。
やっぱりバックは白がいいわ。モノクロームがいい。落ちつくというよりは安心するね。

とりあえず、現状ArchivesとかTagsとかがないので早めになんとかしたいなと。