会社の勉強会で見た CSS で遊ぶネタが楽しそうだったのでメモ。
IE では filter 等の独自拡張があっていろいろ遊べる。
MSDN: フィルタとトランジション
http://msdn.microsoft.com/library/ja/default.asp?url=/library/ja/jpisdk/dhtml/content/filters.asp
この拡張は他のブラウザでは使えないけど、
Firefox にも -mox-**** という独自拡張がある。
CSS Reference:Mozilla Extensions
http://developer.mozilla.org/en/docs/CSS_Reference:Mozilla_Extensions
たとえば両方のブラウザで半透明にしたいような場合に、
以下のように CSS に両方書いておけば良いらしい。
filter:alpha(opacity=85);
-moz-opacity:0.85;
追記)
CSS3 では opacity というプロパティが定義されていて、
これを使えば半透明に設定できるらしい。
http://www.w3.org/TR/css3-color/
手元にあるブラウザの opacity の実装状況を css3.info の
ページから調べてみた。
http://www.css3.info/preview/opacity.html
IE7 --> 未対応
Firefox2 --> OK
Opera --> OK
という状況みたい。
Safari も OK とのこと。
IEでも早く対応してくれれば良いんだけど、
それまでは、特殊効果が必要なときには、
以下のように3つ併記するのが良さげ。
filter:alpha(opacity=85);
-moz-opacity:0.85;
opacity: 0.85;