PNG対応JSの決定版「DD_belatedPNG」

Javascript2010年12月7日

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

• DD_belatedPNG

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

• IE7.js
• jQueryのプラグイン「pngFix.js」
• AlphaImageLoader
• iepngfix.js
• IE PNG FIX v2.0 Alpha
• Unit PNG Fix
• DD_belatedPNG.js

上記に挙げたものは、たしかに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に関して何も欠点がありません。

• 「iepngfix.js」を応用してPNG画像をIE6に完全対応させる方法
• IEで右クリックを禁止するJavascript

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

• Javascript第1回／Webアプリが作れるjsライブラリ「Sencha Touch」の使い方
• Javascript「iepngfix.js」を応用してPNG画像をIE6に完全対応させる方法
• Javascript意外と便利！Javascriptでurlのフォルダパスを取得
• JavascriptJavascriptの読み込みをひとつのファイルにまとめる「import.js」
• Javascriptテーブルをセルごとにハイライト「tablecloth」
• JavascriptPNG透過ライブラリにまつわる問題を全て解決したuupaa-suketrans.js

「Javascript」の他の記事を読む

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