前提

ここで言う「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は無意味

サンプルコード

例えば、こんなコード。

<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が弄られますが、
その影響でこの不具合に遭遇する事があるので注意したいですね。

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