understandard

2008-12-19

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

IE6でも透過 PNG が使えて、さらに background-image + background-repeat + background-position に対応した JavaScript が Drew Diller’s blog で公開されていました(JavaScript ファイルのダウンロードページ)。
※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 となっているので、今後もっと軽くなったりするのが楽しみです。

response

  1. ITキヲスク | IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」
    2009-02-15 08:04:54reply

    […] Understandard […]

  2. チバのブログ
    2009-03-14 13:46:38reply

    DD_belatedPNG.js。IE6で透過pngを表示させる決定版!

    IE6で透過pngを表示させるためのJavaScriptについて、IE6で背景画像に透過pngを指定してリピートさせるという記事でiepngfixを紹介したのですが、あれ重いですよね。 IE6で透過p…

  3. DD_belatedPNG.js。IE6で透過pngを表示させる決定版 | チバのブログ
    2009-07-23 17:59:53reply

    […] IE6で透過PNGを使えるようにするjavascript […]

  4. IE6で透過pngが透過しない件 | WordPress入門記
    2010-07-20 11:03:24reply

    […] 追加 understandardさんのお勧め↓ http://www.understandard.net/javascript/javascript002.html AKPC_IDS += "151,"; This entry was posted in XHTML,CSS and tagged IE6, png. Bookmark the permalink. Post a comment or leave a trackback: Trackback […]

  5. IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」 | ITキヲスク
    2010-08-18 00:47:34reply

    […] Understandard […]

  6. IE6で透過PNGを表示させる方法「DD_belatedPNG」 - ロボログ
    2010-11-27 19:44:34reply

    […] IE6で透過PNGを使えるようにするjavascript understandard […]

leave a reply

your email address will not be published.

you may use these HTML tags and attributes: <a href="" title=""> <em> <i> <strong> <blockquote cite=""> <q cite=""> <cite> <pre> <code> <del datetime=""> <ins datetime="">