Prev / Next / /home/pochi/ChangeLog

CSS の独自拡張[computer]

2007-05-29

会社の勉強会で見た 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;

permlink