Safari の CSS 独自拡張あるいは先行実装など

プロパティ・値の解説

あんまり信用しないように。

inline-block

display プロパティ値のひとつ。ブロックボックスでありながらインラインに流し込まれるような形態を指定するもの (→Demo of 'inline-block')。 CSS2.1 から登場予定の新しい値。… CSS2.1 はまだ草案段階なので、独自拡張あるいは先行実装に近い。

-khtml-opacity

不透明度を設定するプロパティ。 CSS3 草案の opacity の先行実装かと。 Gecko 系にも -moz-opacity という独自拡張プロパティがある。 WinIE でも独自拡張 filter で同様のことが可能。

text-shadow

テキストの影文字効果を設定するプロパティ。 Safari 1.1 はたぶんこれを実装した初のブラウザ。 text-shadow プロパティは CSS2 で定義されているものではあるけど、現状の CSS2.1 草案では text-shadow はいったん仕様から外されてます。んで CSS3 で再度定義される予定の模様。つまり現状では、限りなく独自拡張あるいは先行実装に近い。

rgba(R, G, B, A)

色値指定用の書式。RGB 値に加えて不透明度を指定できる。 CSS3 草案の RGBA color values の先行実装かと。適用対象のプロパティは border-color, background-color, color, text-shadow あたり。

ためしてみる

div.test           { display: inline-block; position: relative; width: 100px; height: 100px; margin: 25px; padding: 0; background-color: pink; }
div.test p         { display: block;        position: absolute; width:  50px; height:  50px; margin:    0; padding: 0; font-size: 25px; font-weight: bold; line-height: 1; color: red; }
div.test p.shadow  { text-shadow: 4px 4px #ff8080; top:  25px; left:    0; }
div.test p.rgba    { color: rgba(255, 0, 0, 0.3);  top: -10px; left: 60px; }
div.test p.opacity { -khtml-opacity: 0.3;          top:  60px; left: 60px; color: white; background: red; }

<div class="test">
   <p class="shadow">萌え萌え</p>
   <p class="rgba">萌え萌え</p>
   <p class="opacity">萌え萌え</p>
</div>

<div class="test">
   <p class="shadow">ふがほげ</p>
   <p class="rgba">ふがほげ</p>
   <p class="opacity">ふがほげ</p>
</div>

Safari v1.1 での表示状況

注意すべき点

• text-shadow の使えるブラウザは現状 Safari 1.1 のみだと思うので、これの効果を前提としたスタイル（配色）を行うのは限りなく危険。どうしても使用したい場合は、注意深く使用する事。
• -khtml-opacity を使用すると、後続する要素や、まるで無関係の要素にまで効いてしまうバグがある模様。これもヤバい。
• rgba(R, G, B, A) という色値記述を使えるのは今のところ Safari 1.1 だけだと思うので、それ以外のブラウザでは丸ごと無視されます。というか CSS3 草案によると「 RGBA 値に未対応のブラウザはこれを（不透明度だけ無視して）単純に RGB 値として扱ってはならない」とされてます。よって、 RGBA 値による指定が完全無視されても問題無いよう、 CSS1/CSS2 の色指定記述を併用する事。
• この手の独自拡張・先行実装は一切使わないのがもちろん最良であります。

参考リンク

• Safari 1.1 (Surfin' Safari)
• inline-block (CSS 2.1 Specification (W3C Working Draft 15 September 2003))
• Text shadows: the 'text-shadow' property (CSS2 Specification)
• Text shadows: the 'text-shadow' property (CSS3 Text Module (W3C Candidate Recommendation 14 May 2003))
• Transparency: the 'opacity' property (CSS3 Color Module (W3C Candidate Recommendation 14 May 2003))
• RGBA color values (CSS3 Color Module (W3C Candidate Recommendation 14 May 2003))