前提

ここで言う「belatedPNG」は本家ではなく、
本家をフォークしている「jquery-belatedpng.js」を指しています

何をしてくれているのか、知っておく

まず、belatedPNG が行ってくれる処理をおさらいしてみましょう。 簡単に書いていますが、結構面倒な事を一手に引き受けてくれている事がわかります。

1. fixPng() をあてた要素の複製をVMLで生成してそれを表示する
2. 元要素のスタイルの変更を検知してVML要素にも変更を加える
3. VML要素へのマウスイベントを元要素に伝えてくれる

別にbelatedPNGに限った話ではないですが、どのような処理をしているのか知っておく事で何か不具合が発生した時に対処しやすくなりますね。 実際にどのようなVMLが生成されてどう配置されているのかは、IEの開発者ツール等で見る事ができますので困ったときは覗いてみましょう。

fixPng()のセレクタは適切な物を

たまに拝見するのが、次のようにゆるいセレクタで fixPng() を行っているコードです。

$("div, img").fixPng();

これは大変極端な例ですが、全てのdiv要素とimg要素に対してbelatedPNGの処理を行っています。 多くの場合このコードは正常に動作しますが、正直好ましくないと思うのです。

プレーンでない物が増えていく

余計なものまで処理させてしまうコストの面もそうなのですが、 それ以上に重要なのは、予想外の物までVML化されてしまう点です。 そこで困るのはフロント開発のエンジニアさん達です。 プレーンな要素を想定して組み上げたアプリが何故か動かずに頭を抱えたり、 問題解決に辿り着くまでに大きな回り道をさせられてしまうかもしれません。

belatedPNG の内部で処理不要な要素（PNG画像が関わっていない物）はスルーしてくれているので、 そこまで大きな問題は発生しないかもしれませんが、「よくわからないもの」は出来るだけ少なくしておきたいですね。

適切なセレクタで実行しよう

そんなわけで、渡すセレクタは適切に絞った物を設定する事をお勧めしたいです。 可能なら、処理するクラス名を定義してしまうのが安全かもしれません。

$(".fixpng").fixPng();

処理する環境を判別する

belatedPNGが必要な環境はIE9未満（透明度を使用する場合）なので、その環境下だけで処理を行うようにします。 例えば条件分岐コメントを利用する場合はこの様な感じで。

<!--[if lt IE 9]>
<script src="jquery.belatedpng.js"></script>
<script>
    $(".fixpng").fixPng();
</script>
<![endif]-->

ミニファイなどの都合でJS内で判別したい場合は、「CSSでopacityをサポートしていない」「IEである」という条件で如何でしょう。

if(! $.support.opacity && !! ActiveXObject){
    $(".fixpng").fixPng();
}

「VMLが使用可能か」という条件でも良いのですが、下記リンクで紹介されている様に、少し長くなってしまいます。

cf) javascript – How do you detect support for VML or SVG in a browser – Stack Overflow

コンテナ以下の要素の透明度をまるごと変更する

belatedPNG（VML）の特徴の一つとして、親要素のopacityを継承しない問題がありますが、 あるコンテナ以下の要素の透明度をまるごと変えたい時はどうしたらよいでしょうか。

<div class="holder">
    <img src="foo.png" alt="" />
    <img src="bar.png" alt="" />
    <img src="baz.png" alt="" />
</div>
<script>
    $(".holder img").fixPng();
    $(".holder").fadeOut(); // 画像の透明度が変わらない！
</script>

上のコードで “.holder” まるごとフェードアウトしたい場合、例えば次のようにしてみます。

$(".holder, .holder [vmlInitiated]").fadeOut();

belatedPng はVMLに書き出す際に元要素に「vmlInitiated」という属性をつけるので、それを利用してみた例です。 あるいは、前述のようにクラスが決まっているのであればそれを指定してしまった方が効率的ですね。

関数化してみる

毎度面倒な場合は関数化してみましょう。

// $.fn.fadeOut() のラッパー
$.fn.belatedFadeOut = function(){
    this.fadeOut.apply(this.find("[vmlInitiated]"), arguments);
    return this.fadeOut.apply(this, arguments);
};
// $.fn.fadeIn() のラッパー
$.fn.belatedFadeIn = function(){
    this.fadeIn.apply(this.find("[vmlInitiated]"), arguments);
    return this.fadeIn.apply(this, arguments);
};
// $.fn.animate() のラッパー
$.fn.belatedAnimate = function(){
    if(arguments[0].opacity !== undefined){
        args = [].slice.call(arguments);
        args[0] = {opacity: arguments[0].opacity};
        this.animate.apply(this.find("[vmlInitiated]"), args);
    }
    return this.animate.apply(this, arguments);
};

// fadeOut等のかわりに使います
$(".holder").belatedFadeOut(1000);

クラスによるbackground-imageの変更を適用させる

例えば次のように、クラスによって要素の背景画像が変わるCSSを組んでいるとしましょう。

<style>
    .box { background-image: url(red.png); }
    .box.blue { background-image: url(blue.png); }
</style>

<div class="box"></div>

<script>
    if(! $.support.opacity && !! ActiveXObject){
        $(".box").fixPng();
    }
    $(".box").addClass("blue"); // 通常は背景が blue.png に変わるが…
</script>

通常、”.box” に “blue” クラスをあてれば背景が “blue.png” に切り替わるはずなのですが、 belatedPNGが効いた要素では残念な事に切り替わりません。

なぜなのか

belatedPNGでは、VML要素と元要素のスタイルの同期をとるために “propertychange” というイベントを利用しています。 これは、要素の属性に変更が加えられた際に発火するイベントです。

• propertychange | onpropertychange event (Internet Explorer)

元要素のスタイルに変更が加えられた時にこのイベントが発火して、 VMLの表示を元要素のスタイルにあわせて更新するという仕組みです。 ですが、背景の更新は背景に関する変更がなされた場合にしか行われません。 つまり、クラス名の変更を行っても何も起きないのです。

独自属性で半ば強引に解決する

要するに、元要素の「背景に関する属性」を変更すれば更新されるわけです。 コードを読むと「属性名に”background”という文字を含んでいるかどうか」で判別しているので、 こんな感じで更新されるようになります。

$(".box").prop("update-background", true);

なお、属性の値は「変更」される必要はなく、値を設定するだけで発火しますので、trueを渡し続けても大丈夫です。

まとめ

belatedPNG は、本来出来ない事を出来るようにしてしまう魔法のようなスクリプトですが、 魔法には動く為の仕組みがあり、動かす為のルールもあります。 正しい用法を守って、計画的に利用していきたいですね。

テーマの都合上あまり良くない点ばかり書き連ねる事になってしまいましたが、 個人的に似たライブラリを再発明してみようとした事があり、その面倒さに閉口した記憶があります。 完成に到るまで本家ならびにjQueryプラグインを書き上げてくれた方にこの場をかりてお礼を申し上げます。

いつの日か、ライブラリの命名通り、透過PNGの対応自体が「時代遅れ」になる事を待ち望んで。

サンプルコード

例えば、こんなコード。

<style>
.test {
    display:block;
    width:128px;
    height:128px;
    background:url(./test.png) 0 0 no-repeat transparent;
}
.test:hover {
    background-image:url(./test-hover.png);
}
</style>

<a href="#" class="test"></a>

test.pngとtest-hover.pngは透過PNGです。
IE6では当然透過されずに背景がグレーになります。

IE7,8では綺麗に表示されている様子ですが…

$(".test").css( "opacity", "0.5" );

このようにfilterのopacityを弄ってやると、下記の画像のような状態になります。キタナイ。

DD_belatedPNGはどうか

上記の現象はalphaImageLoaderを使えば解決出来るのですが、
alphaImageLoaderはhover時の処理が面倒だったり、遅かったりと問題もあります。
そこで去年ぐらいからもてはやされているDD_belatedPNGを使ってみましょう。

DD_belatedPNG: Medicine for your IE6/PNG headache!

DD_belatedPNGは他の透過PNG用ライブラリと異なり、
alphaImageLoaderを使わずにVMLで透過を実現しているのが特徴。
パフォーマンスも比較的上々のようです。

IE8でエラーが出る

が、困ったことにIE6向けのライブラリであるが為か、
IE8で走らせようとするとエラーが出ます。
今回のお題はIE6～8全てに関わる物なのですが、困りました。

jQuery移植版を使用する

探してみたところ、DD_belatedPNGをjQueryプラグインとして移植した記事を発見。
そこらへんの問題も解決してくださったみたいです。素晴らしい！

該当記事

DD_belatedPNG を改造して、jQuery.belatedPNG を作ってみた | プログラマ気分

リポジトリ

wakuworks/jquery.belatedPNG – GitHub

jquery.belatedPNG.jsで試してみよう

jquery.belatedPNG.jsは、
jQueryオブジェクトにfixPng()メソッドを提供します。
こんな感じにしてみる。

$(".test").fixPng().css("opacity","0.5");

opacityを設定しても汚くならない！素晴らしい！

マウスイベントが効かなくなる問題

ただ、このままだとa要素に対するマウスイベントが効かなくなってしまう模様。
CSSで設定した:hoverのスタイルも適用されず、
クリックしてもウンともスンともいいません。

なので、子要素に「透明な何か」を入れてあげる事で解決を試みます。 例えば透過Gif。

<a href="#" class="test">
    <img src="trans.gif" width="128" height="128" alt="Foobar" />
</a>

これでマウスイベントがきちんと効くようになりました。
hoverのスタイルも適用されます。

もしくは、同サイズの透明要素を中にappendしてやったり。

var $test = $(".test");

// opacityに非対応なブラウザに適用
if( !$.support.opacity ){
    $test.fixPng()
    .append(
        $("<span>").css({
            display : "block",
            width : $test.width(),
            height : $test.height(),
            backgroundColor : "#ffffff",
            opacity : 0,
            cursor : "pointer"
        })
    );
}

$test.css( "opacity", "0.5" );

まとめ

jQueryのプラグインでfadeIn/fadeOut等を使うとopacityが弄られますが、
その影響でこの不具合に遭遇する事があるので注意したいですね。

マウスイベントの件は、他に良い解決策あったら知りたいです！