The Trap of Web Design

透過 PNG の利用について、先日、いまさらながら書きましたが、現在リニューアル作業中の某サイトで、徹底的に使いまくって、その上 jQuery のエフェクト関係タップリにしたら、フェードの ClearType 問題やら、 IE ではムチャクチャ重くてとてもでないけど見れたものではない状態になってしまいました。

まずは、この filter 利用の重さ解消に、DD_belatedPNG を取り入れました。中身の複雑さはともかく filter 利用時の問題各種が無くなるので、スタイルシートの背景指定で PNG を使ってる時はコッチが断然良いです。なので、基本今後はコッチ使います。

ClearType と filter 処理の絡み（あんまり国内サイトでは情報を見かけませんが、調べればハマってる方は多い）の問題点があって、様々な状況考えると、ヤバい箇所はフェード等の効果自体を IE では行わない方向で作ってますが（あるいは、フェードを使う箇所は透過画像とテキストを利用しない）それは仕方ない。その対処のためにその効果自体を使わないなんて勿体ない！

今回いぢくってるサイトでは、構成上、FancyBox と jCarousel の機能が重要で、FancyBox に関しては、もともとウインドウの透過背景処理が含まれていて、その内部で fixPNG 処理がはいっています。そこで、アニメーションに影響されない単純背景画像箇所は DD_belatedPNG にして、そのほかは fixPNG() にしました。FancyBox のウリである透過影は .fancy_bg なんで、ソレは fixPNG()。

あと、jQuery フェード関係を使った時に、ClearType 環境で汚くなる箇所は、

(function($) {
$.fn.ctFadeTo = function(speed, to, callback) {
  if(winie) {
    $(this).css('visibility','hidden');
  }
  $(this).fadeTo(speed, to, function() {
    if(winie) {
      $(this).get(0).style.removeAttribute('filter');
      $(this).css('visibility','visible');
    }
    if(callback != undefined) callback();
  });
};
})(jQuery);

fadeTo 箇所をこんな感じにしてごまかしてます。

DD_belatedPNG が jQuery のプラグインだったら 良いのにな。自分で作ろうと思ったけど、ちょいと不明点があってやめちゃった。