ウェブデザインにおいて、ぶち当たる壁のひとつが、
なんといっても、「Internet Explorer」（IE）の存在でしょう。

特に私の場合、jQueryを活用してコンテンツを作成する事があるのですが、
コンテンツ作成が軌道に乗り、作る楽しさに目覚めたときに突然突き落とされる試練と言えば、
IEの存在でしょう。

中でも、透過PNGとの相性が、とっても悪く、
IE8や9辺りなら、普通に表示する分になら、なんてこと無い場合もあるのですが、
既存の<img>タグに対し、後でJavaScriptにて「opacity」のCSSを変更した際に、
透過PNGのアルファチャンネル（透明部分）が黒くなってしまう事があります。

哀しいことに、以下画像のようになります。

せっかく影を付けて立体感を出してあげても、この通りです。
試しにやってみるなら、既存の<img>タグに対し、
JavaScriptで「opacity:0.9」を与えてみると、こうなると思います。

「opacity」自体も古いIEでは対応しておらず、IE独自の「filter」で設定する必要があるそうです。

jQueryで画像のフェードイン・アウトを行う場合、
「show()」「hide()」なら、「opacity」の値を触れずに行うため問題ないらしいのですが、
個人的には、「animate()」メソッドで統一して行いたいと思う事があるので、
どうしても「opacity」の値を調整したいときがあります。

また、「animate()」メソッドでは、最後の引数に関数を入れる事で、
アニメーション終了時の処理を書く事も可能ですが、
IEとの処理分けを行おうと思うと、関数入り「animate()」メソッドを
丸々if文にコピーしなきゃいけないのかと、なってきそうですね。
そういう場合には、第1引数に入れるCSSプロパティの連想配列だけを、IE用に分けて作成するか、
「opacity」用の値を入れた変数を別に作るのも手でしょうね。

CSSの「position」プロパティも影響があるらしいのですが、
個人的には、せめてこれだけは使わせていただきたいところです。
「position:relative」を設定した親要素を起点に、
「position:absolute」を設定した子要素が、
「top」「left」等の値に応じて、自由に数値で位置指定が可能な、とても便利なCSSです。

もしこれを使わずに位置指定を行うとしたら、
子要素の「margin」や「padding」で位置調整をするということ！？
ゲームのキャラクターの立ち位置だって、
起点から右いくつ、上いくつという数値で指定されているというのに、
それがキャラクターから出される見えない何かによって、
反発作用で移動しようという事になるわけです。
そんなやり方だと、当然その間に別のキャラクターがいたとしたら、
そのキャラクターと同じ位置の起点を利用する事もできず、
間にいるキャラクターと、そのキャラクターが出す見えない何かの分を計算したうえで、
自らも見えない何かを出さなければならないのです。じつにややこしい話ではありませんか。
だから「position」は、決して捨てたくはないのです。

根本的な解決としては、アルファチャンネルが含まれるPNG画像を使わなければいいのですが、
PhotoShopで余計な部分を切り落とした画像を使う場合、
アンチエイリアス機能により、見た目わからない程度の薄い色が画像の縁に含まれて、
それが黒く表示されてしまうなんて事も有り得ます。
PhotoShopは高機能である反面、無意識に使っていると、うっかりそういう点も見逃しがちです。
そういう場合には、あえてアルファチャンネル機能に対応していない画像編集ソフトで
画像を作成するというのもアリかもしれませんね。

個人的には、できれば古いIE問題から開放されたいというのが正直な気持ちではあります。
処理が重くなっていないかどうかは心配し、PCやスマートフォンのような、
ブラウジングに向いた端末以外にも、ブラウジングメインではない
ニンテンドー3DSなどゲーム機でも表示して、うまく動くかどうかは試しているのですが、
やはりいつになってもIEというものは盲点になりがちです。
というかむしろ、容量的スペック的制約よりも、互換性という制約からは開放されたい気分です。

Tweet