未知との遭遇(Webコーディング編)

先日も書きましたが、いくつか今までに経験のないことがあったのでメモ。

リロード1回目と2回目で動作が変わる
じつはこれは勘違いで、リロード処理がリロードではなかったというオチ。
というかリロード後にとある処理を仕組んでいたが、単にその副作用だっただけ。

iPadだけ特定動作でブラウザが落ちる

「問題が起きたため、このwebページを再度読み込みました」

iPadでこの文字列を何度見たことか…
.animate()と相性が悪いとは聞いていましたが。

Firefoxでのみ座標がずれる
これは先日メモしたアレ。
IE8,9,11,Chrome,各種Android端末,Mac/Safari,iOSもすべて問題ないのに、FF(Mac,Win)だけ動作おかしい。
こういうこともありえる。
しかもキャッシュが残っていると問題が起きない…

画像の高さと幅はきちんと指定しましょう。

Firefoxでたまに高さの座標がずれる?

最初はまったく理解不能だったが、何とかデバッグが終わった。
以前からFirefoxだけ高さの座標がずれる現象がたまに起きていて気になっていた。
やっかいなのは再現するときとしないときがあるということ。

詳細を調べていくとわかった。
キャッシュが残っていると問題ない。
初回アクセスで画像の高さが取得できないらしい。

html側で画像のwidthとheightをしていてもだめ。
cssで高さを指定してもだめ。
cssで画像の「幅」まで指定すると初回アクセス時、画像の「高さ」がようやく認識できるみたい。

たかだか100px未満の画像だが8つも使いまわすと800pxもずれてしまう。

シングルページデザインで、今自分がどこにいるのか座標をみて制御するようなページだと、ページ下に行くほどずれが目立つ(ページ上部ではズレが小さいので気づかない)。

以上はIE, Chrome, Safariではまったく起きなかった。
Mac, WinのFFでのみ起きる現象っぽい。

iOSは無視するとして、AndroidのFFは大丈夫なのか?
後でチェックしよう。

cssで中央寄せが効かないとき

もう過去に何度も同じようにハマっているので自戒を込めてメモ。
margin:0 auto;などで要素の中央寄せが効かないときは下記を試す。

  • インライン要素なら効かない。display:block;でブロックレベル要素にする。
  • widthで幅を指定する(100%では無理)。

文字実体参照と数値文字参照

PAK86_smonitatocode20140517500今更ですが、衝撃の事実を知りました。

HTML5では文字実体参照が使えなくなります!
ご存知でしたか?

© ®  などが使用禁止となるそうです!
(最終的にはブラウザの実装次第ですが。)

ではどうするかというと©といった感じで、数値文字参照で記述します。
今後はこれを覚えるのか…

“文字実体参照と数値文字参照” の続きを読む

Webデザインの進化

NKJ56_commandmba500Webデザインの進化は早いです。
大抵は「DTPデザインと比較して早い」という意味でみんな使っていると思います。

私も5年前にWebスクールで色々と習いました。当時習ったFlash, ActionScriptは今ではほとんど使う機会がないですし、SEO対策も当時と事情が全く変わりました。
“Webデザインの進化” の続きを読む