【DD_belatedPNG】IE6で透過pngを使う

 

ついにYahoo!JAPANもIE6対応をやめるようですね!
http://www.itmedia.co.jp/news/articles/1011/10/news043.html

牛乳を飲むと腐ってなくてもお腹が痛くなるyukaringです(乳糖不耐性というらしい...)
こんにちは。

9年前の腐った牛乳IE6の対応からついに開放されるのでしょうか!?
そろそろIE6から7,8にシフトしても良い気がしてきました。

今まではIE6対応が必須だったため、IE6で普通にできないことは
なるべく実装しないようにコーディングを行ってきましたが、
今後のIE6対応はjsなどで補完するような方法も取れるようになるのではないでしょうか。

そんなわけで、IE6でできないことのひとつ「透過png」を表示するためのjsライブラリをご紹介します。
透過pngが使えたらもっとデザインの幅が広がるはずなのですが、
IE6がいたために、グラデ背景とシャドウ付きボックスで可変とかムリだから!(怒)
デザイナーさんに文句を言っているわけですが、
このライブラリを使えばIE6でも簡単に透過pngが使えます。
DD_belatedPNGのダウンロード

【導入方法】

1. jsファイル読み込み
<!--[if lt IE 7]>
<script type="text/javascript" src="js/DD_belatedPNG.js"></script>
<![endif]-->
<head>タグ内にDD_belatedPNG.jsを読み込みます。
IE6以下にしか意味が無いため、条件分岐コメント<!--[if lt IE 7]>~<![endif]-->内に記入します。
(if It IE7=IE7未満のとき)

2. 透過要素の指定
<script type="text/javascript">
DD_belatedPNG.fix('.png');
</script>
同じく条件分岐コメント内に、DD_belatedPNG.fix('.png');を挿入します。
fix('●●●')が透過する要素の設定で、CSSで書くときのように指定します。
id, class, タグ(div, imgなど)も指定可能です。
複数指定の場合はfix('img, .png');のようにカンマで区切ります。

あとは指定した要素に対してpng画像をimgなり、CSSで背景なりに設定するだけでOKです。

【DD_belatedPNG】IE6で透過pngを使うのデモ


この手のライブラリは、リピートが出来ないなど制約を受けることが多いですが、DD_belatedPNGはそういった制約がほぼ無く、ブラウザ毎の設定もjsの読み込み部分のみなので、導入の手間も少ないです。
IE6のpng対応ならこのライブラリが一番使いやすいと思います。

※tableタグの背景に指定するとIEがフリーズします...。