The Trap of Web Design

いまさらかもしれませんが、24bit PNG を IE6 (IE5.5) でも扱うためには、

1. CSS に filter を記述する
2. iepngfix.htc を利用する（CSS には behavior: url(iepngfix.htc); を記述）
3. iepngfix.js を利用する（CSS には behavior: expression(IEPNGFIX.fix(this)); を記述）

あるいはライブラリを使っていれば、jquery.pngFix や jquery.pngfix.js を使う等、探すといっぱいあります。

なので最近は最初からアルファ画像にする予定でデザインを考え、普通にスタイルシート作り、あとから IE用にハック入れるなりなんなりというふうになっています。IE6（5.5）のレンダリング時間が多少かかるにしても、今となってはよいことにしよう、となってきています。クライアントさんからつっこまれたらやめるけど（笑）「最近の PC なら気になりませんよ」といったら「そうなんでしょ」と云われる。本人が IE6 環境の場合、だいたいみんな新しい PC に変えたいと思ってる時期ではある。

---

ところで、アルファ PNG 使えて表現が広がるのは良いとして、このアプローチについてなんですが、やっててふと思ったのですよ。

いずれにせよ、コレって「IE は独自のスクリプト処理で対処する」ってことでしょ。behavior はツカイドコロによっては便利ですけど、イマドキ DOM Scripting で CSS 処理含めてスクリプトでどうにでもできるって時に、なんで、その命令をスタイルシート側にいれなくちゃなんないの？…と思うのです。

結局、filter にせよ、behavior にせよ、独自実装だから、そのコードが無関係のユーザーエージェント側には渡したくないなということですが。

それで、スタイルシート側に behavior いれるのやめて、jQuery リンクのウシロで、

jQuery(function () {
/* PNG fix for IE6 and older browsers */
if (!jQuery.support.boxModel) {
$('img, div, h1, h2, a').css({
	'behavior': 'url(/nucleus331/skins/clips2/js/iepngfix.htc)'
});
}
});

なんてかいてみたら、動作しましたよ。なんだかすげー冗長な気もしますが。

いまさら、DHTML Behavior を追求して、behavior の仕組みをバラして、document.all 記述処理にしたところで、結果は変わらないと踏んで、上記で動くからもうイイヤ、という感じ。たぶん、すっげー回り道して処理してると思うのだけど。

尚、上記の jQuery.support.boxModel での判別だと、準拠モード動作の IE6 で効かなくなって意味が無いので、判別のトコロは古い書き方（jQuery 自体が IE5.5 では動作しないので実質 IE6 だけ分かれば良い）

var isIE = ($.browser.msie && parseInt($.browser.version.substr(0,1)) < 7);

という判別コードいれちゃうほうが良いでしょう。ちなみに上のは fancybox のコードですが、jQuery プラグインでその内部に既に pngfix 処理がはいってるものがあって、上のように、まとめて一発処理！という手抜きをするとコンフリクトします。

なので、細かく個別に処理するか、プラグイン側の処理を削除しちゃうかといった作業が必要な場合があったりします。24bit 透過 PNG 利用も、jQuery 使ってる方も、すでにいっぱいいて、そんなこたーもう手慣れたモンサー、という感じかもしれませんね。

img のとこなんかは、jquery.pngfix.js の使い方にあるけど、

$('img[src$=png]')

にしとくほうがよいですね。ようは処理する前に処理すべき箇所を絞り込むことが大切。

自分だと「IE6 が無ければなぁ」と一番感じるのは、スタイルシートのレイアウト処理バグ fix 関係よりも 24bit PNG のこの対処をしてるトキで、これまでなかなか全編に渡っての利用はできないでいましたが、まぁ日本はともかく、ウェブ雑誌に掲載されてるようなオシャレなサイトはイマドキだと最初のアクセスで、全部グレーじゃんー！みたいな奴がバンバンあって、やっぱり進んでるなぁ、というか、うらやましいというか。

それこそ（もう）大昔の IE5.5 時代に filter の存在知って、コッソリチョコチョコ透過画像をいれて悦に入ってた頃から、判別処理対応をいつも強いられていた（ていうか意地でやってた）自分にとっては、いまになっても結局相変わらずなだけで、面白く無いです（笑）