YappoLogs

クロスブラウザ対応やってみて思った事

HTMLやらCSSやらJavaScriptやら色々弄った感想

- Firefox, Safari, Google Chrome なんかは割と手がかからない
- Opera も上の3つ抑えてればだいたいok
- なんかSafari4のJavaScriptの挙動が3と微妙にちがう
- IEは死ね、IE7からだいぶ互換性的な物がよくなってるけどIEは死ね。
-- IE6のサポートを切り捨てる時代はまだか?
- IE8は確かにJavaScriptが速くなってるがGoogle Chromeは劣るしSafariとか本当速い、Firefox3.0は結構遅い
- z-indexの事を考えてないで作ってると、いざとなったら本当にびっくりする
- pngの透過画像をあわせるのは案外しんどい
-- DXImageTransform.Microsoft.AlphaImageLoader使うんだけど、background-imageが入ってると混ざる、そしてDXImageTransform.Microsoft.AlphaImageLoaderで出すと画像が背景画像じゃなくなる
-- classにpngimgみたいなのが入ってるときはbackgroundをnoneにするのやってみたけど、#idname:hover {} みたいに hover されたときだけpng画像を変えたりとかenable/disableクラス与え状態によってpng画像のurlを変えたりすると上手くDXImageTransform.Microsoft.AlphaImageLoaderが当たんなくなる
- 元から配布されてるjqueryライブラリを俺俺改造されてると他の人が困るので、元のは弄らずに外部からわかり易くmethod差し替えたりするとよい。
- アンダースコアハックとかCSSの人がハックハック言ってる物はPHPのクラス名の区切りにバックスラッシュ使うようなもんだと思ってるから使いたく無い
-- ブラウザ毎のCSSを吐き出すジェネレータ書いてHTMLから読む時にブラウザによって変えるのが正解なんだろなー

- float: leftしまくった要素を持つ親要素の縦横も、IEだけは float: left してる要素分だけ加算されるので、上のブラウザと全然違う事になったからjavascriptで縦横辻褄合わせた。
-- たいていの非互換製はJavaScript使う力技でなんとかなったり
- IE6なんかはpadding-leftの値を1px変えるだけですっきりしたり

まとめ

たんぽぽを乗せるだけの簡単な仕事じゃないんだけど、殆どの苦労は機械的に解消出来そうな感触を得た春であった

IEを使わないでJavaScriptを書く時に陥る一番の罠としてはハッシュの最後の要素に,を付けてしまうという事(Perlでは皆よくやってる)だが

var hash = {

    key: name,

    last: value, // ここの ,

};

これはIEでは動かないのだが、コードが多くなると探すのがとても大変である。
が、そんな時はJavaScript Lintを使えば良い。
アプリケーションのユニットテストの中に、これを使ってlintかけるテストなんか入ってると興奮が止まらないだろう。
たとえば

#!/usr/bin/perl

use strict;

use warnings;

use Test::More;

use Text::SimpleTable;

plan skip_all => 'this test requires "jsl" command' unless `jsl` =~ /JavaScript Lint/;


my @files = <htdocs/js/*.js>;

plan tests => 1*@files;

my $table = Text::SimpleTable->new(25, 5, 5);

for my $file (@files) {

    # 0 error(s), 6 warning(s)

    my $out = `jsl -stdin < $file`;

    if ($out =~ /((\d+) error\(s\), (\d+) warning\(s\))/) {

        my ($msg, $err, $warn) = ($1, $2, $3);

        $file =~ s!htdocs/js/!!;

        $table->row($file, $err, $warn);

        is $err, 0, $file;

    } else {

        ok 0;

    }

}

diag $table->draw;

こんなのを書いてもらって使ってる。

これ使ってると、「ああ、JavaScriptのスコープってfunction毎なんだな」ってのが良く思い出せて良いです。

(はてなに書こうとしてたフォーマットをそのままコピペしたのでみにくいかなっと)

Posted by Yappo at 2009年03月31日 13:44 | TrackBack | tech