Web

なんかここにWEB関係のこと書くのは久々な気がするんですが、
これは忘れぬうちに書いておかねば！と思ったので、メモメモ。

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

これ、超イイ！！

＊この記事、数日前に書いて後日公開しようと思ってたんですが、 　今日本屋で「Web Designing ９月号」を立ち読みしたら、 　”透過PNG+CSSデザインがやってきた！”という特集が組まれていて、 　しかもIE PNG FIXもことも掲載されていて。 　「なに？！おれのギャリック砲にそっくりだ！」ばりに衝撃で、 　なんかこの記事見て書いたって思われるのもしゃくなので、 　公開は見送ろうかと思ったんですが、IE PNG FIXに関しては 　紹介だけで使い方は書いてなかったのでやっぱり公開することに。 　なんか後出しで寂しい感じですが、自分のやってることも 　割とタイムリーだったってことにちょっと安心もしたり（笑）

　

最近、HTMLでのWEBデザインで結構使う透過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点毎にすべて記述する必要があり。。
これがかなりめんどうで。。はっきりいってあまり実用的ではなく。
しかもこのハックでは背景としてしか使用できないので、
上記の様な場合はテキストインデントで枠外へ飛ばして、
さらにここでは省いてますがサイズの指定も必要で。

どうにかならんもんかね。。と思っていた毎日。
自分でJavaScript書くのも時間がもったいないとぼやいてみたり。
これがあるおかげで透過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 」が実現できるとはいえ、
あのなんといえないモッサリ感は許せないです。

そもそも、もっとモダンブラウザが一般ユーザーに浸透すれば
こんなにも面倒なことを考えずにすむのに。。
いっそのことマイクロソフトが強制的にIE7へアップデートしてくれたら
なんて思う今日この頃です。

TwinHelix
http://www.twinhelix.com/

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