opacity が利用可能かを判定する

js CrossBrowser

コメント欄も見てね。

uupaa.js コードリード用のエントリです。興味がない方は読み飛ばしてください。

IE9(IE9pp2) が CSS3::opacity をサポートしました。これで filter:alpha はレガシーコードになります。

考えた

opacity のサポート状況を判定するコードを考えてみました。

ポイントは、4つ

  • IE以外の opacity は String型
  • IE8までの opacity は 型が不定(代入された値を保持してるだけの入れ物)
    • style.opacity = 0.25; なら Number型になり、style.opacity = "0.25"; なら String型になる
  • IE9pp2 の opacity は Number型
  • "opacity:.25" で、IE8以下 と IE9pp2 を振り分けている
    • cssText = "opacity:0.25" とすると、IE8以下なら "0.25" が、IE9pp2 で 0.25 となり区別できない
    • cssText = "opacity:.25" とすれば、IE8で ".25" が、IE9pp2 で 0.25 が取れるため振り分けできる
  var node = document.createElement("div");

  node.style.cssText = "opacity:.25";
  if (node.style.opacity == "0.25") { // === じゃないよ
    alert("opacity ready");
  }

IE9製品版では修正され、opacity が他のブラウザのように String 型になっているかもしれませんが、そのような場合でも、大丈夫っぽいコードにしました。

おまけ

0.25 は二進数的に循環小数にならないようにってだけですので他の値でもOKです。
ただし、0.5 は Opera9.2x で判定が失敗するのでダメです(opacity = "0.50" が返る)