iepngfixについてメモ

このMTのテンプレにちょっと手を加えただけの見た目からどうにか脱却したく、今せっせと新しい見レイアウトを作っています。
で、どうせだったら仕事でもこれから多用しようと思っているPNG画像をいっぱい使ってしまえwといろいろ試行錯誤しています。
PNGはモダンブラウザなら問題なく表示されるものですが、個人的に憎きIEはなぜか7からしかサポートされておらず、例に漏れず6対策を余儀なくされるのであります。非常に面倒です。
過去にもいろいろpngfixを試しているのですが、当時はまだまだ無知で、結局断念して来た私ですが今回は本気ですよ（笑）。
というわけで、いろんなｐｎｇｆｉｘライブラリを比較しつつ、導入方法を忘れないうちにメモしておきます。

今回使用したｐｎｇｆｉｘライブラリ

• unitpngfix
• TwinHelixのIE PNGfix

• DesignWalkerさんで公開しているpngfix（韓流プログラマユンサンさんの開発らしいです）

以上の他にもいろいろ試しましたが、他は大体上と似たようなものなんで割愛します。
以下、比較検証の結果。

• unitpngfix
  ライブラリをDLしてHTMLのheadのなかに
  <!–[if lt IE 7]>
          <script type=”text/javascript” src=”unitpngfix.js”></script>
  <![endif]–>
  
  と、記述するだけ。簡単です。しかしIE6で確認すると若干レイアウトがずれます。それからテキスト置換のリンクボタンのhoverがレンダリングされない。もしかしたらjavascriptの画像置換にすれば良いかもしれません。（そこまで試してないです…）

• TwinHelixのIE PNGfix
  まずはサイトからライブラリをDLして来て解凍します。任意のディレクトリに（私の場合jsディレクトリに）blank.gifとiepngfix.htc（必要であればiepngfix_tilebg.jsも）を格納して、HTMLのhead内に

  <script type=”text/javascript” src=”js/iepngfix_tilebg.js”></script>
  <style type=”text/css”>
       任意のセレクタ{behavior:url(behavior: url(js/iepngfix.htc);)}
  </style>

  と、加えれば指定されたセレクタに指定されているpng画像の透過が適用されます。
  iepngfix_tilebg.jsはIE5対策のためのものなので、ターゲットとしてなければ入れなくても大丈夫です。
  本家サイトが英語なので、ちょっと説明を読むのが大変かもしれませんが、CSSの指定の部分を外部CSSに書き込むと適用されないようです。（確認済み）
  それからテキスト置換のリンクボタンはこれも適用されませんでした。

• DesignWalkerさんで公開しているpngfix
  jsライブラリをDLして来てアップロードし、htmlのhead内に

  <script type=”text/javascript” src=”iepngfix.js”></script>

  と記述して読み込ませ、さらに

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

  とCSSに追加し、適用したい所にclass=”iepngfix“を追加すると適用されます。
  普通の背景pngだったら問題ありませんが、角丸などが入っている背景画像をno-repeatでさらにpositionで指定したりすると背景画像が歪みます（ワオ）。
  なので、使う時は1pxの透過画像をrepeatで使う場合のみが無難な感じです。

という感じで、今日の私の貴重な休日が丸一日PNG画像の実験でつぶれた訳です。それもこれも、MacIE5ではPNGを採用しているのになぜかWinIE6では非採用にしたMSの所為かと…。逆恨みの一つもしたくなります。

それよりも何よりも、まず最初に私が自分でjsを書けるようになれば良い話なんですよね…簡単なライブラリは書けますが、そこから先になかなか進めないのが歯がゆい感じです。