前提

ここで言う「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の対応自体が「時代遅れ」になる事を待ち望んで。

前提

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

「おおきくくずれなければいい」IE6対応

「IE6ではおおきくくずれなければいい」

最近よく聞くようになってきたフレーズですが、つまり「完全にあわせなくてもいいけど一応見えるようにしてね」という事で、 見た目をある程度損なっても許容されるわけです。（と好意的に解釈しましょう。）

ところで、今IE6を使うような人達は、おそらく諸事情があって「致し方なく」使っていて、 きっとそういった方々はWebページで多少の劣化が見られても「致し方なく」思うのではないでしょうか。

そんな前提の元、レガシー環境への対応としては欠かせない透過PNGの話を少々。

IE6対応に8bit PNGを採用する

IE6での透過PNG対応には、8bit PNGという強い味方がいます。 多少見た目を損なってしまうものの、きちんと透過出来るようになります。 実際にどのように見た目が変わるかというと…

上が普通のブラウザで表示した8bitの透過PNGです。 わかりやすく背景にタイル状の画像を敷いています。

上が同じ画像をIE6で表示させたものです。 半透過の部分を完全に透過させて表示してしまう為、薄く敷いたドロップシャドウが消えたり、 エッジがギザギザになったりしています。細めの文字などで使用するのは結構厳しそうですが、 画像を選べばきちんと内容は伝わりそうです。

8bit PNG制作に便利なpngquant

pngquant — lossy PNG compressor

• pngquant — lossy PNG compressor

pngquantはコマンドラインでPNGを8bitに変換し、最適化する為のツールです。 IE6対策としても有用ですが、PNGを省サイズ化する上でも非常に便利なアプリケーションです。 GUIツールも配布されているので、「黒い画面」が苦手な方は試してみても良いかもしれません。

GUIツールでは、最近は ImageAlpha がよく知られているようです。 最適化時にpngquant以外のツールも選択できる優れ物です。

コマンドラインで pngquant を使ってみる

ここではコマンドラインでの使い方に軽く触れましょう。

$ pngquant img/foo.png --iebug

上の処理は、最適化された “img/foo-ie-fs8.png” という画像を新たに出力します。 “–iebug” というオプションは、PNGの「ほとんど非透過」の部分を非透過にするので、エッジの劣化を少し抑える事が出来そうです。

接尾辞を付けずに同名で上書きを行いたい場合は、“–ext” オプションと “–force” オプションを使います。 大事な事なのでもう一度いいます。同名ファイルとして上書きします。用法を守って正しくお使いください。

$ pngquant img/foo.png --iebug --ext .png --force

“img/” ディレクトリ内のpng画像をすべて処理したい場合は、ワイルドカードや find コマンドを併用したりします。

$ # img内のPNG画像を全て処理
$ pngquant img/*.png --iebug --ext .png --force
$ # img内のサブディレクトリも再帰的に全て処理
$ find img/ -name "*.png" | xargs pngquant --iebug --ext .png --force

GUIではなくCLIを推したのは、クロスプラットフォームである点と、 みんなだいすきな Grunt と連携が取りやすいからです。

フィルタを通した8bit PNG

ちなみに、IE6で8bit PNGをAlphaImageLoaderを通して表示させても見た目は変わりませんが、 VMLのフィルタを通して表示させるとモダンブラウザと同様に綺麗に表示されます。 ある箇所だけ綺麗に見せたかったりする場合は部分的にbelatedPNG等を使用しても良いかもしれません。

opacityを変更した際の黒フチの問題

IE7-8で起こるこの現象については以前にも触れましたが、 結局のところAlphaImageLoaderやVMLに頼らざるを得ません。 両者にはそれぞれ特徴があるので、状況によって上手く使い分けましょう。

特に、肝となる透明度の調整で、二者はまったく違う挙動をするので注意が必要です。

AlphaImageLoaderへの透明度設定は親要素で

AlphaImageLoaderをあてた要素に直接 opacity を設定しても動きはするのですが、 ズームを変更すると表示に不具合が生じます。

.demo {
    ...
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
        sizingMethod=scale, src='sample.png') alpha(opacity=50);
    background-color: transparent;
}

上のようなスタイルをあててIE8以下でブラウザのズームを弄ると再現できると思います。 条件は恐らくこんな感じでしょうか。

• AlphaImageLoaderとalphaのフィルターを同じ要素にかけている
• その要素のbackground-colorが指定されていないか、transparentだ
• ブラウザのズームが100%ではない

ズームをいじった状態でフェードイン・アウトなどをかけるとやられてしまいますので、 透明度を弄る場合は親要素に対して行った方が良いでしょう。

belatedPNG（VML）への透明度設定はその要素で

AlphaImageLoaderと違って、どうやらVMLは親要素の透明度を継承しないため、 fixPng() をあてた要素そのものに透明度を設定してあげなければいけません。

<div class="holder">
  <img src="foo.png" alt="" />
</div>
<script>
$(".holder img").fixPNG();

$(".holder").css("opacity", 0.5); // 画像の透明度は反映されない
$(".holder img").css("opacity", 0.5); // 反映される
</script>

ブロックまるごとフェードインなどしたい場合は一工夫必要ですね。 楽に一工夫する方法は、また別のお話。

一旦まとめ

belatedPNGについてもう少し掘り下げる予定でしたが、 長くなりましたのでエントリーを分けることに致しました。

つづきはこちらで。 » belatedPNGと幸せにくらす為の小さなコツと小技

追記

2013/09/30 22:57

「-ms-filterの指定は不要では」と助言を頂いたので、該当箇所を削除しています。
cf) 佐祐理ブログ: -ms-filterは無意味