ver_FireFox

相変わらず、日記ならぬ月記のような更新頻度。
昨夜イベントがひとつ終わった息抜きに、仕事用サイトを少し修正してみた。
右図のようにアナログ風味なサイトで、背景画像として、廃墟の石壁の前に立つモデルの写真を使っている。そしてその石壁の部分にナヴィゲーションのアイコンを配置しているわけだが、背景画像と馴染ませるために、やはりここは透明画像を使いたいところ。

個人的にGIFは嫌いである。圧縮アルゴリズムの特許権問題もあるし、なによりジャギーが美しくない。PNGという完璧な透過画像を生成する形式があるのだからそれを使わない手はない。ところがである。世界最高のクソ・ブラウザ 世界最高の普及率を誇るIEでは透過PNGを表示できない（下図参照）というクソ厄介な問題がある。

ver_IE6 もっともシンプルでスマートな解決策はIEを速やかにアンイストールすることだ。さようならIE。FireFoxやSleipnirを使いませう。もしくは IE7（何かと問題の多いらしいが）に切り替えませう。マジでそうお薦めしたいところだが、ここでIE撲滅を叫んでも無意味なので、面倒臭いけども対策を考えてみようと思ふ。
ググルであれこれ調べてみたところ、いろんな解決法が見つかったのだが、どれもこれもかなり手がかかる。シンプルな手法はないものか。そう思ってさらに調べてみたら、下記の２つの手法が見つかった。

Afternoon Cafeさんの手法では透過PNG画像を１点のみ表示させることが可能。たとえば共通ヘッダー画像のみを透過画像にしたいときなどには便利なのだが、私のようなケースでは１点のみじゃ足らない。なので、Hiro Kondaさんのやり方を倣うことにした。
以下、その導入のまとめ。

  • 上記サイト「ビヘイビア ダウンロード → png2vml.htc」をありがたく頂戴する。
  • png2vml.htcjをサーバの任意の場所にアップロードする。
  • CSSのbody要素に下記のように追加する。
body {behavior: url(http://your_site/png2vml.htc);}
  • 透過させたいPNG画像に class="AlphaPng" を加える。
<img src="hoge.png" width="50" height="50" alt="hoge" class="AlphaPng" />

以上で終わり。素晴らしく簡単でしょ。
ただしこれだけだと <a> タグ内のリンク画像にマウスオーバーしたときにポインターが表示されない問題が残るので、CSSに下記のような記述を加える。

/* ナヴィゲーション・アイコンのクラス属性が .navi-icon である場合のサンプル*/
.navi-icon .AlphaPng {cursor: pointer;}
以上の手順を経て私の仕事用サイトのPNG画像もIE6で透過表示されるようになった。
しかし本音を言えば、IEのためのギミックやハックに時間をかけたくない。ヤ○ーなどの大手が IEのみ対応のコンテンツを配信したり、そうしたウェブ上でのパワーポリティックが理由でIEの今があり、それはネットの未来にとってよろしくない。やはりもっとも正しい対処法はIEのアンインストールだと、ちょっと怒ったふりして言ってみる。