2008-12-19

IE6で透過 PNG を使えるようにする JavaScript DD_belatedPNG

IE6でも透過 PNG が使えて、さらに background-image + background-repeat + background-position に対応した JavaScript が Drew Diller’s blog で公開されていました(JavaScript ファイルのダウンロードページ ( http://www.dillerdesign.com/experiment/DD_belatedPNG/#release0.0.8a ) )。
※2009年11月19日10時57分 バージョンアップしているので、リンク先を0.0.6a から0.0.8a に変更しました。

IE6で透過 PNG が使えるようになる JavaScript は結構色々ありますが、background-repeat や background-position に対応したものはあまり見かけないので、いざというときに活躍してくれるはずです。
ファイルサイズも圧縮版で約5KB と軽いです。

使い方は、

  1. DD_belatedPNG.js を読み込む
  2. head 内で DD_belatedPNG.fix() を呼び出し、適用させたい CSS セレクタを指定する

となっています。
具体的には、

<!--[if lte IE 6]>
<script type="text/javascript" src="DD_belatedPNG_0.0.6a.js"></script>
<script type="text/javascript">DD_belatedPNG.fix('.png_bg');</script>
<![endif]-->

IE6以上のブラウザなどには意味がない指定なのでコンディショナルタグで他のブラウザには読ませないようにしています。
スクリプトのバージョンが0.0.6a となっているので、今後もっと軽くなったりするのが楽しみです。