SeezooをIE6で動かしてみた

labo

OSS界隈ではあんまり需要がなさそうで、かつ時代に逆行するようなカタチですが、とりあえず動かしてみました。

そもそもの発端

巷では「IE6のシェアがウン％を切った」と良く聞くのですが、実際私が関わった案件では90%位の確率で

「え〜IE6で動かないの〜？」

と言われます。これって私の周りだけなのでしょうか。
ともあれ、「対応してません」と言い続けるのも悔しいので、やってみました。
JS,CSS界では強敵のIE6との戦い。その戦果を報告します。*1


まずは結果から

とりあえず、結果から。


もう使われないであろう手法（ロストテクノロジー）を使って結構頑張って動かしてます。

IE6対応にあたって

私がWebを始めた頃はIE6が最新のブラウザでした。
なので、IE6に対するノウハウはそれなりにあると思っていたのですが…甘かった。
JavaScript(JScript)の方は特に問題なく。でも問題はCSS。

CSSでの既知の問題として、以下のようなことが一般的ですね。

  1. position:fixedに対応していない。
  2. PNGに対応していない。
  3. width[height]:100%のレンダリングがおかしい。
  4. float+margin横方向は2倍計算。
  5. float合計が100%になるとカラム落ち。
  6. コンテンツが増えると、それに合わせてカラムが拡大する。

既知の問題であるが故に、対応策もちょっとググれば出てくるわけですが、
これらの問題はSeezooにとってはどれもクリティカルで、一筋縄ではいかず。
さらに、

  • iframeの挙動がおかしい

という問題にさんざん悩まされました。Concrete5がIE6に対応していないのは正しい判断だと思います。

まぁでもせっかくなのでSeezooはやろうかな。と、覚書も含めて対応したものを書いてみようかと思います。
今更感が漂いますが、再確認、再勉強の意味も込めて。

position:fixedの対応

この対策はもう出尽くしている感がありますね。

  • behaviorを使う。
  • expressionを使う。
  • onscrollイベント毎にFIX。

こんな感じですかね。（他あれば教えてください）で、色々考えましたが、

  • behaviorを使う
    • 高度なJSライブラリはbehaviorを使うケースがあるので、できれば開けておきたいから☓。
  • expressionを使う
    • 処理が重すぎる。要素が1個くらいならいいけど、今回は複数個あるのでブラウザが落ちるかも。なので☓。
  • onscrollイベント毎にFIX。
    • こちらも処理が重くなりがち。あと動きがカクカクするので☓。


どれもダメかなぁと思ったのですが、

よく考えれば、このボックスたちは編集時にしか現れないよね？

ということに気付き、cover-body法（勝手に命名）で再現することにしました。簡単に言うと、

JScriptでDOMツリーを改変して、強制的にposition:absolute = position:fixedな状態を作る方法

です。とってもイレギュラーな方法なので、あとが大変ですが、まぁそこは多めに見てもらいたいところです。
実際の表示では問題ないですし、そのうち消えていくブラウザだと思うので。これで解決。


PNGの表示対応

filter:progid:DXImageTransform.Microsoft.AlphaImageLoaderで対応。
あと、処理を振り分けてアイコンとかはGIFにコンバートしたものを表示させるように。


width[height]:100%のレンダリング対応

面倒ですが、ブロック移動時に横幅を再計算させてます。
あと初期化の時点でレイヤーの高さとかも再計算。


float+margin横方向は2倍計算。

これはテンプレートを書く方に任せました。


float合計が100%になるとカラム落ち。

エリア分割ブロックなどでこの問題が発生。
見た目は美しくないけど、IE6はMAX99%で計算するように調整。


コンテンツが増えると、突き抜けず、カラムが拡大する。

編集モードの時は赤い点線を付けるのですが、このボーダー分だけカラムの横幅が拡大されて、
floatが落ちるという何とも厄介な問題が発生しました。
結局、これも初期化の時点でカラム幅を再計算＋ボーダー縦横分をマイナスするようにして回避しました。


iframeの挙動制御

今回、これで大きくつまづきました。
一般的なブラウザは[iframe].onload = function(){};が出来るのですが、IE（6だけかな？）はcreateElementで作ってsrcをセットすると、
onloadが完了する前までは

typeof [iframe] === 'unknown'

というおかしなことになり、しかもそのままappendChildするとsrc先がおかしなことになりました…。
しかもonloadはダメみたいです。

色々試した結果、[iframe].onreadystatechange = function(){};が使えることが判明し、
内部で[iframe].readyState === 'complete'で判定することで事なきを得ました。*2

結果（反省）

まだ一部レイアウトが完全じゃない部分があります（全く使えない、というほどではないですが）。
あと、画像編集ツールはIE6ではサポートしません（限界）
機能を落として完全互換か、古いブラウザは切って新しい機能をふんだんに使うかが悩ましいところですね。

もっとJSとCSSが上手く書けるようにならなければ、と改めて思いました。
JSのコードが汚くなりすぎたので、次バージョンに入れるかは考え中です。

さっそくの追記

これでOK…かと思いきや、他にも問題がありました。
後日別で書きます。

*1:どちらかというとJSは素直ですね。CSSの方が強敵でした。

*2:完了後にイベントを解除することも忘れずに。