PNG対応JSの決定版「DD_belatedPNG」

Javascript2010年12月7日

多くのサイトでIE6でいかにしてPNG対応を施すか、という方法が多く紹介されています。
私も実際の案件を通して、いくつかの方法を試してきました。
しかし色々試行錯誤した結果、結局のところ完璧なものはありませんでした。
その中でも「DD_belatedPNG」はかなり完成度の高いものと言えるでしょう。PNG対応をどうしてもしなければならないケースに出くわした場合、こちらの方法をおすすめします。

DD_belatedPNG

IE6でPNGが使えないのは周知のことですが、その対応方法は様々です。
ざっとまとめたところ、下記のようなものが挙げられます。

上記に挙げたものは、たしかにpngに対応してくれますが、不完全なものばかりで、「背景リピートに非対応」「ブロックレベルの背景にpngを指定するとリンクがきかない」「ライセンス的に商用利用できるか怪しい」「グラデの透過背景は不可」「対応させるまでのプロセスが煩雑」「jQueryと喧嘩してjsエラーを起こす」「重い」等々、かなり致命的な欠点があるのが事実です...が、その中で「DD_belatedPNG.js」がもっとも賢いPNG対応jsであることがわかりましたので、もしpngを使わなければいけない案件が出てきたら、コレを使うのが無難だと思います。

一応特徴としては、下記のような感じです。

MIT Licenseで配布
背景リピートに対応
pngを背景に使用してposition:relativeにするとIEで背景が30%ぐらいの確率で表示されない
（スペック依存っぽいです）
body・tr・tdの背景にpngは不可
overflow:scrollの中ではスクロールにpngがついてこない

欠点としてはこのぐらいなので、致命的ではないです。
使い方もすごくカンタンで、jsを読み込ませて、「DD_belatedPNG.fix('.pngfix');」と書いておけば、class="pngfix"と書いた要素だけでpng対応してくれます。

※余談ですがIE7.jsはpngに関して何も欠点がありません。

この記事を読んでいる方にオススメの記事

「Javascript」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。