メモログ

透明度のクロスブラウザ対応

小ネタ。「MTIf タグを利用したタブ型ナビゲーション」の記事で作成した、アクティブ以外のタブには透明度をつけて濃淡の差を出しています(別に透明度で濃淡の差を出す必然性はないのですが使ってみたかった)。指定の仕方は下記のような感じ

opacity: 0.8;-moz-opacity: 0.8;filter: alpha(opacity=80);

opacity は CSS3 の、透明度を割り当てるための指定です。safari 2、safari 3、Firefox 2、IE7 など最新のブラウザではすでに対応ずみの指定で、この指定だけでもけっこうそのまま使うことができます。ただ IE6 や古い Firefox だと opacity は対応していないので、一緒に -moz-opacity: 0.8;filter: alpha(opacity=80); を指定しています。-moz…の指定が古い Firefox 用で、filter の指定が IE6 用。これで代表的なブラウザのすべてで問題なくなります。

Firefox2、IE7 では opacity だけで問題ないので、あと数ヶ月もしたらこのクロスブラウザ対応はあまり気にしなくても良くなりそうですね。うむ。

9/19 追記。Mac Firefox で閲覧したときに、opacity の影響でフォントのアンチエイリアスのレンダリングが変な感じになる(文字が細くみえたり太くみえたりする)。全体に opacity:0.9999 を入れたり、text-shadow で常に細い状態で表示させることができなくはないようですけど、素直に背景色とフォント色で濃淡をつけるように変更しました(以下のサイトを参考にしました)。

私について

Yutaka Yamaguchi
東京在住。TypeScript, Node.js, Reactなどフロンエンドが主力。Perlも書く。SwiftやRubyも過去には使ってた。過去のTOEIC 860くらい。