alphafilterjs

IE6で透過PNGを利用するためのTIPS

本エントリーは「CSS 昔話 Advent Calendar 2015」16日目のエントリーです。

昔話となってますが2年ぐらい前に対応した記憶があるのでわりと最近の話ですね。

IE6は10年以上も一緒に過ごしたブラウザであり憎悪を通り越して非常に愛おしブラウザになっております。

いちばんお茶目だなと感じるのは透過PNGのアルファチャンネルが上手に表示できないこと。ほんとに可愛いやつ。

透過PNGをIE6で利用するために使われた有名なライブラリが「DD_belatedPNG」です。また、わたしがつくった「alphafilter.js」も多くの方にご利用いただきました。

そこで今回の昔話ではこれらのライブラリがどのような原理で透過PNGを表示していたか解説を行います。実はこれらのライブラリは全く異なるアプローチでIE6対応を行なっております。

AlphaImageLoader

有名なのがIEの独自拡張フィルターであるAlphaImageLoaderを利用して表示する方法。to-Rでは9年半前に紹介のエントリー(IEとそれ以外のブラウザでアルファ画像を使う方法)を書いております。

通常の背景画像を指定した後にスターハックを利用してIE6だけAlphaImageLoaderフィルターでpng画像を表示します。

div.alpha{ width:100px; height:200px; background:url("alpha.png"); } * html div.alpha{ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='alpha.png',sizingMethod='scale'); background:none; }

こうすることでアルファチャンネル部分がちゃんと透明に表示されるようになります。描画できるエンジンがあるのなら最初から表示すればよいのにホントにIE6は可愛いやつですね。

alphafilter.jsは上記の作業を自動でやってくれるライブラリです。そこに、img要素をdiv要素に変換してsrc属性をAlphaImageLoaderフィルターに変換したり、ロールオーバーに対応してるなどちょっと便利機能が追加されています。

VML

DD_belatedPNGが採用している方法はVMLを利用した描画方法です。VMLはVector Markup Languageの略でSVGの前身の仕様つまりお父さんです。詳しい仕様は「とほほのVML入門」を見てください。

以下の様なVML用の要素に変換することでアルファチャンネルを表示します。

<v:rect> <v:fill type="frame" src="alpha.png"/> </v:rect>

IE6だけでなくIE7,IE8でもフェードインやフェードアウトを行うと縁が黒くなり、それをちゃんと表示するためにVMLが利用されるので馴染みが深い方法ではないかと。

どれもこれも素敵な思い出ですね。

愛おしいIE6チャンがいなくなって寂しくなってしまったので、Androidさんと遊んで来ようと思います。

そんじゃーね

IE6で透過PNGを利用するためのTIPS

本エントリーは「CSS 昔話 Advent Calendar 2015」16日目のエントリーです。

昔話となってますが2年ぐらい前に対応した記憶があるのでわりと最近の話ですね。

IE6は10年以上も一緒に過ごしたブラウザであり憎悪を通り越して非常に愛おしブラウザになっております。

いちばんお茶目だなと感じるのは透過PNGのアルファチャンネルが上手に表示できないこと。ほんとに可愛いやつ。

透過PNGをIE6で利用するために使われた有名なライブラリが「DD_belatedPNG」です。また、わたしがつくった「alphafilter.js」も多くの方にご利用いただきました。

そこで今回の昔話ではこれらのライブラリがどのような原理で透過PNGを表示していたか解説を行います。実はこれらのライブラリは全く異なるアプローチでIE6対応を行なっております。

AlphaImageLoader

有名なのがIEの独自拡張フィルターであるAlphaImageLoaderを利用して表示する方法。to-Rでは9年半前に紹介のエントリー(IEとそれ以外のブラウザでアルファ画像を使う方法)を書いております。

通常の背景画像を指定した後にスターハックを利用してIE6だけAlphaImageLoaderフィルターでpng画像を表示します。

div.alpha{ width:100px; height:200px; background:url("alpha.png"); } * html div.alpha{ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='alpha.png',sizingMethod='scale'); background:none; }

こうすることでアルファチャンネル部分がちゃんと透明に表示されるようになります。描画できるエンジンがあるのなら最初から表示すればよいのにホントにIE6は可愛いやつですね。

alphafilter.jsは上記の作業を自動でやってくれるライブラリです。そこに、img要素をdiv要素に変換してsrc属性をAlphaImageLoaderフィルターに変換したり、ロールオーバーに対応してるなどちょっと便利機能が追加されています。

VML

DD_belatedPNGが採用している方法はVMLを利用した描画方法です。VMLはVector Markup Languageの略でSVGの前身の仕様つまりお父さんです。詳しい仕様は「とほほのVML入門」を見てください。

以下の様なVML用の要素に変換することでアルファチャンネルを表示します。

<v:rect> <v:fill type="frame" src="alpha.png"/> </v:rect>

IE6だけでなくIE7,IE8でもフェードインやフェードアウトを行うと縁が黒くなり、それをちゃんと表示するためにVMLが利用されるので馴染みが深い方法ではないかと。

どれもこれも素敵な思い出ですね。

愛おしいIE6チャンがいなくなって寂しくなってしまったので、Androidさんと遊んで来ようと思います。

そんじゃーね