PNG透過ライブラリにまつわる問題を全て解決したuupaa-suketrans.js

Javascript2010年12月21日

以前、「DD_belatedPNG」というPNG透過ライブラリを紹介させて頂きましたが、それに並ぶクオリティのライブラリを見つけましたのでご紹介いたします。
その名も「uupaa-suketrans.js（何て読むんでしょうね、うーぱーすけとらんす？）」というライブラリです。

• 透過png専用のJavaScriptライブラリ(uupaa-suketrans.js)

透過対象

以下の要素が透過対象となります。

• <img src="*.png">
• <input type="image" src="*.png">
• <* style="background-image: url(*.png)" class="alpha">
• <* style="background-image: url(*.png)" class="png">

よくある透過PNGライブラリとの違い

（以下転載）

• 透過PNGにまつわる、色々な問題を解決済みです。
• 透過PNGの罠 - AUSGANG SOFT も発生しません(たぶん)。
• 動的な画像の追加/ファイルフォーマットの変更/要素の削除にも対応しています。
• 起動時にスクリプトで一度だけ処理するわけではなく、常に監視しています。
• 監視方法は、ポーリングではなくイベントドリブンなので、負荷がほとんどありません。

ということだそうです。

使い方

class="alpha" か class="png"を透過させたい要素に付加するだけです。

実際自分も使ってみましたがこれといって目立つ欠点は無さそうでした。
「DD_belatedPNG」と比べてどちらが良いかといった判断は難しそうですが、こちらもMITライセンスで配布されていますので問題なく案件でも使用できそうです。
「DD_belatedPNG」はIE6用に条件分岐してJavascriptを読み込ませるので、そういった意味では「uupaa-suketrans.js」のほうがソース自体は美しくなりそうです。

• IEで右クリックを禁止するJavascript
• Javascriptの読み込みをひとつのファイルにまとめる「import.js」

この記事を読んでいる方にオススメの記事

• Javascript第3回／Webアプリが作れるjsライブラリ「Sencha Touch」の使い方
• Javascript意外と便利！Javascriptでurlのフォルダパスを取得
• Javascriptテーブルをセルごとにハイライト「tablecloth」
• Javascript「iepngfix.js」を応用してPNG画像をIE6に完全対応させる方法
• Javascript第1回／Webアプリが作れるjsライブラリ「Sencha Touch」の使い方
• JavascriptJavascriptの読み込みをひとつのファイルにまとめる「import.js」

「Javascript」の他の記事を読む

• ※承認制のため、即時には反映されません。