stystk

基本的に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 0;なんかでよくて、別に影を表示しなくてもいい。bodyに使ったりするとページ全体に効くね。MS Pゴシックも滑らかに！でもChrome限定。

サブピクセルレンダリングが効かないようでボケたような感じだけど、大きめのフォントサイズで使えばいいかも！というか、通常の12~16px程度のフォントサイズだとレンダリングがイマイチ。Arialがものスゴく胡散臭くなる。

まぁChrome限定…。

追記:

検証したChromeのバージョンは2.0.169.1。

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

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

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

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

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

見た目変えました。

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

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

cssでHelvetica Neue Lightを使うときのメモと、いろいろやってて気付いたこと。

まぁまず使う時の書き方。

font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;

これ以外の書き方だとうまくいかなかった。font-familyの”Helvetica Neue”を取るとFirefoxだとダメで、”Helvetica Neue Light”を取るとOperaがダメ。font-weight:lighter;だとSafariでの表示がLightにならなかった。
と、各ブラウザで動作がバラバラになってて、結局上の書き方でなんとかうまくいった。でも、上の書き方でHelvetica Neue UltraLightを使おうとするとFirefoxだけダメだった（font weightは100ね）。これはFirefoxのバグなのかなぁ…。

気付いたこと（間違ってたら叱ってください）

• Firefoxはフォントのファミリーネームにしか対応していない
• SafariとOperaはフォントのフルネームも対応してる
• Operaはfont-familyをフルネームで指定されたとき、font-weightを無視する
• Safari(4は)はfont-familyをフルネームで指定されていても、font-weightが機能する
• OperaもSafariもfont-familyをファミリーネームで指定すると、レギュラー以下のweightにできない

というような感じ。検証ブラウザのバージョンが全部Beta版（Firefox3.1b2, Safari4Beta, Opera10a）なんであてにならないかも。

Continue reading

デザイン変えました。

背景は白の方が落ちつくなぁなんて言ってたのにね…。色付きです。
前回も使ってたposition:fixed;を今回はページ送り部分にも使いました(画面の下部分にあるやつね)。で、ついでに今回はじめてcss3のborder-radiusとbox-shadowも使いました。対応してるブラウザ(Safari3, Firefox3.1beta)で見てみるといいよ！

実はこのデザインに至る前にしこしこ作ってたのがあったんだけど、年明けと共に飽きられてしまった（ぼくに）。この新しいのはぼくにしては珍しく、一週間くらいで作ったんじゃないかな。ま、シンプルだし、jsまだ書いてないしね。

前のデザインは一月持たなかったなぁ。

そして当然、まだ未完成。

うん。やっぱりもう一度変えよう。変えたばっかりなんだけど。変えよう。

はい。iPhone用のwpテーマを作ってるんだけど、早速困ったとこがあったので備忘録。
(追記: 一番下に解決策あるよ！途中のは見なくていいよ！)

iPhoneを縦横変えた時に文字サイズが変わっちゃう部分があった。でもきっちり固定されてる部分もある。で、比較してみると、styleに「float」もしくは「position」が付いていない部分はiPhoneを縦横変えると文字サイズが変わってしまう、ということみたい。(追記: position:static;だとダメ。float:none;もダメ。)

・参考画像。「Archive: All」にはfloat、test1はposition:relative;を付けてる。test2はfloatもpositionもなし。

縦位置だと文字サイズが揃ってるけど…

横位置にするとfloatもpositionも付いていないtest2は文字サイズが大きくなった。

それと、文字が固定されるのはfloat, positionが付いているblock要素内のinline要素のみで、float, positionが付いているblock要素内のblock要素は文字サイズが変わってしまう。

float, position以外に他にもあるかもー。
あと、viewportも関係しているのかも。参考画像でのviewportは「width=320; user-scalable=no; minimum-scale=0.66667; maximum-scale=1.0;」。

追記:
ワイルドカード使って全要素にposition:relative;付けてもダメだった…。なんでだろ。同じようにしてfloatだとOKだった。けど、レイアウト崩壊＞＜

追記2:
display:inline-block;でもイケる。blockやinlineだとダメ。
なんかオレ、勘違いしてんのかなー。なんかさくっとやっちゃう方法とかあるんじゃないかなぁ。

追記3:
やっぱりあった。Travellers Tales : iPhone 用 Web ページおよびアプリケーションの作り方 – iPhone Development Guidelines を読む
bodyに「-webkit-text-size-adjust:none;」って付ければいいのね。

やっぱりさくっとやっちゃう方法があったなぁ…。
あー恥ずかしい。このエントリ、消してしまいたい。けど、残しとこ。