2009年9月30日水曜日

IE6とIE8のスタイルシートの違い

前回はいかにIE8がファジーで勝手に期待通りの挙動をしてくれるかの話をしたのだが、今回はIE6のスタイルシートを少し解説する。

「みなさん、これが私のサイトです。よろしかったら使ってみてください」と友人・知人に触れ回ったところ、それでものが動かないというのはかなり恥ずかしいもので、ことにIEはVersion毎にCSSの解釈にかなりの差異があるので注意が必要だ。とくにIE6には注意しよう。

実際にこの統計からIE6の使用者は2009年8月時点でまだ13.6%もいる。徐々に減りつつあるとはいえ、最新版のIE8よりもシェアが多い。無視できない割合だ。

実際に何が問題なのかは次の画像を見比べてほしい。

こっちはIE8。


これはIE6(IE8では描写されている画像上部のタブが無い)。


こっちはIE8。


これはIE6(投票するための上下の矢印が無い)。


全体的にCSSが機能していないのが見て取れる。なぜかというのを調べてみたらどうやら下記のようなCSSの記述方法に問題があるらしい。

div>span
{
 font-weight:bold;
}

このspanの部分、div要素の子要素を指定しているspanの部分が機能していない。IE6ではこのような記述を解釈しないようだ。回避方法としては・・・、そのうち調査します。

2009年9月29日火曜日

ブラウザによるjQueryの挙動の違い

ブラウザ間の挙動の違い、とことさらに騒ぎ立てるようなことではないのだが、今回はIEをメインにWeb開発していると、FireFox、Chromeを使ってテストをする際に予期せぬ挙動に出くわすというお話。

動作確認したブラウザのVersion
IE8, FF3.5.3, Chrome3


1、val()とtext()
val()はinput要素のvalueを取得するための関数で、text()はspanやdiv要素などのinnerTextを取得する用。なので下記の記述は間違い、・・・になるはずなのだがIE上では正しく値が取得できてしまう。

// textboxから値を取得(IEだけで動くVer)
var hoge = $('input:text').text();

しかし、これではFF, Chrome上では期待した動作をしない(値が常にempty)ので下記のように訂正。

// textboxから値を取得(全部で動くVer)
var hoge = $('input:text').val();

上記の記述方法でも、もちろんIEは期待通りの動作をする。


2、selectorの厳密さ
これもかなりIEがいい加減だな、という話なのだけれど、ある要素のオブジェクトを取得する際の挙動の違い。

// classにselectedを指定しているspan要素を取得(IEだけで動くVer)
var hoge = $("span[class='selected'").val();

上記、IEでは動くけれど、FF、Chrome上では要素を取得できない。なぜかというと、spanの属性を指定している部分の閉じタグが抜け落ちているからである。これは単純なバグなので発見も容易だと思うけれど、複雑な処理を記述している中でこういうことがあると、コンパイラのないJavaScriptではデバッグするのにかなりの苦労を伴うと思う。実際には下記が正しい。

// classにselectedを指定しているspan要素を取得(全部で動くVer)
var hoge = $("span[class='selected']").val();



というふうに、IEはかなりファジーな挙動をするのでリリース前には他ブラウザでテストを入念に行う必要がある。

最後にFFでScriptをデバッグするのに大いに役立つAdd-onを紹介しておこうと思う。Firebug

My-Clip.netをリリース

情報収集系サイトとしてwww.my-clip.netをリリースしました。このサイトは、各地域の店舗情報とユーザーのUpVote、DownVoteで表される好みを、Googleマップに載せて色々できたらなぁ、という考えから作られました。まだ基本的な機能のみなので、今後も随時機能追加していく予定です。