Web

個人的なメモメモ。

IE6で透過PNGを表示するライブラリ
IE PNG FIX 2

これ、イイ！！

　

最近、当たり前のように結構使う透過PNG。
これを透過PNG未対応のIE5.x～IE6で使用する場合、
これまでは一つずつIE用のハックをしてました。
例えばこんな感じで↓

■HTML

<img src="http://iffalse.com/cgi/mt/mt-static/html/hoge.png" alt="sample" class="png1" />

■CSS
* html img.png1 {
    text-indent:-9999px;
    filter: progid:DXImageTransform.Microsoft.
　　　　AlphaImageLoader(src="hoge.png", sizingMethod="scale");
}

なんせ画像1点毎にすべて記述する必要があり。。
これがかなりめんどうで。。はっきりいってあまり実用的ではなく。
しかもこのハックでは背景としてしか使用できないので、
上記の様な場合はテキストインデントで枠外へ飛ばして、
さらにここでは省いてますがサイズの指定も必要で。

どうにかならんもんかね。。と思っていた毎日。
これがあるおかげで透過PNGを利用したデザインをするのに
後のコーディングを考えると二の足を踏んだりすることも少なからずあるわけで。

そんな中、一月ほど前に発見したIE PNG FIX2。
なんとHTMLの記述を変更することなく、
CSS中に読み込ませるだけでIE5.5、IE6で透過PNGを実現。
さらにIE5.5、IE6以外のブラウザには影響を与えない。
すげー、そしてウレシー。

使用方法は、チュートリアルから抜粋すると以下のような感じで
iepngfix.htcをCSS内で呼び出すだけ。
もちろん外部CSSでも可。
iepngfix.htcファイルへのパスだけ注意。

<style type="text/css">
img, div { behavior: url(iepngfix.htc) }
</style>

あと、同梱されてるblank.gifは忘れずにアップロードが必要です。
また、blank.gifへのパスの設定はiepngfix.htcファイル内の16行目あたり

IEPNGFix.blankImg = 'blank.gif';

で、行われているので、必要に応じてパスを変更。
ここで注意することがあり、相対パスの場合は
iepngfix.htcを使用するHTMLドキュメントにからのパスになっていたので
サイト全体で一つのiepngfix.htcを使うような場合は、
絶対パスにした方が良さそうですね。

また、これを使用するとロールオーバー系の一部のライブラリで
動作しないものがあったので、ロールオーバーする画像をPNG以外にするか、
その画像にはiepngfixを適用しないようにする必要があります。

それと、バージョン2はbackground画像のPNGにも適用されますが、
バージョン1は適用されません。
そしてIE以外のブラウザにちょっと影響が出るみたいです。
なのでバージョン2の使用をオススメします。
（パッケージは”iepngfix_v2”です。ダウンロード先をお間違いなく。）

IE7.jsとかもあるけど、正直動作が気に食わない、
というかまだまだ実用的じゃないですね。
IE6で「background-attachment: fixed 」が実現できるとはいえ、
あのなんといえないモッサリ感は許せないです。

TwinHelix
http://www.twinhelix.com/

"IE PNG FIX 2"
http://www.twinhelix.com/css/iepngfix/