透過PNGを使う時に注意すること２

前回（透過PNGを使う時に注意すること）の続き。

どうしても透過PNGを使いたい場合、IE6でもちゃんと表示させるには、

1. AlphaImageLoaderを使う
2. javascriptを使う

ことになると思います。

AlphaImageLoaderを使う場合

AmentiさんのIEと透過PNGという記事にまとめられていて、読むのは大変ですがとても勉強になります。

この中に「標準準拠モードだと効かない」というように書いてあります。
IE6でも標準準拠モードになるように作っている人は要注意の箇所ですね。

AlphaImageLoaderは外部のスクリプトを使わず一番手軽に利用できるIE6の透過PNG対策だと思います。

javascriptを使う場合

かなりアバウトな表現になっているのは、同じことをするにも様々なスクリプトがあるから。

その中でも、透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる - DesignWalkerで紹介されている、「iepngfix.js」は結構使いやすいスクリプトなんじゃないかと思います。

これを使うときは、iepngfix.jsを読み込み、cssで該当箇所（仮にクラスhoge）に以下のように指定する。

* html .hoge{
behavior:expression(IEPNGFIX.fix(this));
}

指定するのはこれだけ。
あとは、このjavascriptを適用するのはIE6以下なので、html内でそれらのブラウザにだけ読ませる。
これをやらなくても「* html」がついてるので、どっちにしろIE7以上では効かないです。

<!--[if lt IE7]>
<script type="text/javascript" src="iepngfix.js"></script>
<![endif]-->

IE以外のブラウザにはこの対処法は効かないので、[if lt IE7]の部分を[if IE]に変えて、「IEなら」という条件にしてもいいかも知れません。

他に「IE7.js」というライブラリがあります。

これを読み込んでおき、透過PNGに名前をつける時に「XX-trans.png」（XXは任意）という形式にします。
そうすると、backgroundプロパティでこのPNG画像を指定した際に透過されて表示されるというもの。

このライブラリは透過PNGのためだけのライブラリではなく、これを読み込むと、IE6以下でもIE7と同じようなレンダリングをしてくれるという機能まであります。例えばIE6以下で、

1. a以外の要素に:hoverなどの疑似クラスが使えるようになる
2. position:fixedが使えるようになる

というものです。

ただ注意しなければならないのは、既存のサイトにIE7.jsを読み込むと、IE6用に指定していたcssハックが影響して表示にズレが生じてしまいます。気をつけましょう。

それと、IE7.jsについてもう１つ。
サーバー環境にもよるかもしれないんですが、結構重かった記憶が・・・。

一回あるサイトのリニューアルの際に使おうとしたけど、あまりに遅くて導入を諦めたことがあったので、使ってみたい方は一度チェックしてみたほうがいいと思います。
軽かったらぜひ使いたいライブラリです。今後のバージョンアップに期待してます。

2008年7月9日追記

記事を更新した直後に発見してしまったので、追記します。

[JS]超軽量で設置も簡単な、透過PNGをIE6で表示するスクリプト -Unit PNG Fix

実際に使ったことが無いし、容量が軽いから動作が軽いとも限らないのでなんとも言えませんが、javascriptファイルだけなら1KBありません。ここまでファイルが小さいのは今までになかったんじゃないでしょうか？

ダウンロードしたら、Zipファイルを解凍し、unitpngfix.jsの1行目にある、clear.gifのパスを自分のサーバーのものにする。
画像のパスを変更したら、htmlからunitpngfix.jsを読み込む。
これだけでいいようです。

注意：imgタグにwidthとheightの値を入れておかないと画像が見えなくなってしまうようなので、それだけは気をつけてくれということです。

使ってみた方がいたら感想を教えてもらいたいですね。