どうも5月病です。
今回は、IE8以下で24bit透過pngを使ってopacity処理、またはjQueryでのfadeIn・fadeOut処理を行う際に、半透明部分がベタでジャギーな背景になってしまう問題の解決方法とその留意点について書きます。
頼むからIE8以下で見ないでくれ！とは言えないこんな世の中
さて、そもそもこの問題について簡単に説明します。
問題が発生する条件ですが、
・IE8以下で24bit透過pngを使用
・かつopacity処理、またはjQueryでのfadeIn・fadeOut処理を行う
です。
それで起こる問題は
・半透明部分がベタでジャギーな背景になってしまう
こんな感じですね、憎たらしい！
これの解決方法は以下3点でしょうか。
- IE8以下を切り捨てる
世のマークアップエンジニアの本音はここです。
ホントは僕らリッチな表現出来るんですよ！
…みんなChrome使えばいいのに - IE8以下の事を考えて24bit透過pngとopacityまたはfadeIn・fadeOutを組み合わせない効果にする
妥当な対策だと思います。
早めに言わないとデザイナーさんまで作業が出戻っちゃいますけどね。。 - AlphaImageLoaderを使ってIE8以下用にカスタマイズする
今回はこちらの解説ですね、IEだけに搭載されているfilter機能を使って解決します。
後はこちらのサイトがわかりやすく書いてますので、参考ください。
AlphaImageLoaderを使う場合、何を使用するのか
結構この問題に悩まされている方は多いようで、ググれば色々見つかるんですが、どういうセクショニングで構成するのか載ってなかったり、jQueryで一括に書き換えちゃうコードが載ってたりして、ちょっと混乱しちゃいますよね。
ですがとりあえず以下を押さえれば大丈夫です。
そもそもAlphaImageLoaderは、CSSに記述するfilterなのでjsで書く必要はありません。
そうです、filter機能なのでCSSに記述すればうまく動くんですよね。
それなのに何故jQueryのコードが載っちゃうのか。
- 他のモダンブラウザでも見れるようにUserAgentで振り分けをしている
- 透過pngに対して一括でfilterを追加するeach文だった
という2点が挙げられます。
2はともかく1に関しては他のモダンブラウザとの兼ね合いなので、IEだけで考えるならjQueryは必要ないんですよね。
というかコンディショナルコメントで良いんじゃないかと。
AlphaImageLoaderを使う場合のセクショニングについて
AlphaImageLoaderがCSSだけで完結するということは説明しましたが、実際にどういうセクショニングにするのかを記載します。
<!-- ↓透過処理はイメージセクションじゃなくてその親要素に↓ --> <div id="imageWrapper"> <!-- ↓ここにAlphaImageLoaderをかける↓ --> <div id="image"></div> </div> <!-- 親要素はブロック要素で（インライン要素不可） -->
一番重要なのはAlphaImageLoaderを使用する要素と透過処理を行う要素を分けることです。
後、基本ブロック要素ですね。
CSSはこんな感じです。
#imageWrapper {
/* 透過処理（またはこの要素にfadeIn・fadeOut） */
-ms-filter: "alpha( opacity=50 )";
filter: alpha( opacity=50 );
opacity: 0.5;
}
#image {
width: 500px; /* 画像の幅 */
height: 300px; /* 画像の高さ */
background-image: url(hoge.png); /* 画像のパス */
background-position: left top;
background-repeat: no-repeat;
/* 下記はIE8以下用 */
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='hoge.png',sizingMethod='scale');
}
まず透過画像を敷く親要素に透過処理をかけます。
終わったらその中のdivに画像をbackgroundで設定します。
その後IE8以下用の記述を追加します。
何をしているかと言うと、filterはbackgroundとはまた別の描画機能なので、一旦backgroundに設定してある画像を非表示にします。しないと重複して表示されちゃうので。
そしてfilterで描画ですね。その際に画像のパスがちょっとクセがあるので気をつけてください。
これで準備はOKです。
IE8以下でちゃんと表示されていることでしょう。
ただ、これだとモダンブラウザでは表示されないので、IE8以下用の記述をIE8以下のみで読み込むように、クラスを分けるかコンディショナルコメントで別CSSに分けるか、jQuery等で振り分けてください。
これでモダンブラウザを含め、対応完了です。
まとめ
AlphaImageLoaderを使うと色々組み合わせによって不具合でたりするので、使う場合はどうしても必要なときに使いましょう。
なるべくなら使わない良い演出をオススメします。
また
・AlphaImageLoaderは、CSSに記述するfilterなのでCSSのみで実装できる
・AlphaImageLoaderを使用する要素と透過処理を行う要素を分ける
という留意点を守れば、余計な影響を与えずにマークアップ出来るかと思います。
参考にしたサイトは以下です。