現在地は TEA-WORKS > TEA-WORKSのウェブログ > インターネット > Safari 3対応のCSSを使ってデザインそのままに組み直しです。

Safari 3対応のCSSを使ってデザインそのままに組み直し

当サイトのCSSに、Safari 3の独自拡張や先行実装を加え、以前と同様のデザインを実現してみました。
box-shadowなどを試してみたかったということもありますが、もともと、レイアウト上いくつかの問題があったので、それらを解消したいという理由もあってのことです。

以前の表示状態

透過やボカシ影を表現するためにPNG画像を使っていたので、Internet Explorer 6（Windows）など一部のブラウザーでは、意図した表示になっていませんでした。
しかし、そのほかのメジャーブラウザーの最新版であれば、ほぼ、図1のように表示されていたと思います。（図1はOpera 9での表示）

マークアップし直しでほとんどの画像ファイルが不要に

いままで使っていた背景画像は、図2のとおりですが、今回、box-shadowやrgbaを使うことにより、これらレイアウト用の画像がすべて不要になりました。
もちろん、これで以前と同じように表示されるのは、現在はSafari 3のみになりますが...。

今回、書き加えたのは、例えば以下のようなものです。

-webkit-box-shadow: 6px 6px 20px #a0a0a0;
-webkit-border-radius: 6px;
background: rgba(240, 240, 240, 0.6);

それでは、これをSafari 3以外で表示した場合、どのようになるのでしょう？

書き直したHTML+CSSをSafari 3以外で表示した場合

それぞれ、-webkitではじまるものに対応していないのは当然だと思いますが、rgbaへの対応について、また、レイアウトについてはどうか、いくつかのブラウザーで確認してみました。

※rgba非対応では背景色すら反映されないため、手前に通常の"background: 色指定"を記述してあります。

Firefox 3（Mac）の場合

rgbaに対応しているようで、背景色の後ろにある画像が見えています。
レイアウトもSafari 3と同様で、ボカシ影がない以外は特に問題なし。（図3）

※今回使用したのはFirefox 3 RC3のため、正式版では異なる可能性があります。また、Firefox 2（Mac）の場合は、後述のOpera 9.5やInternet Explorer 7と似たような感じでした。

Opera 9.5（Mac）の場合

どうやらrgbaには非対応のようです。
透過がないと、のっぺりした感じになりますね。
レイアウトについては、Firefox 3同様、問題なし。（図4）

Internet Explorer 7（Windows）の場合

rgba非対応でレイアウトは問題なしと、Opera 9.5と似たような感じになりました。（図5）

Internet Explorer 6（Windows）の場合

rgba非対応に加え、PNGの透過部分が青くなってしまいます。（図6）
また、この画像では切れていて見えませんが、左側では一部、重なってしまっているところもありました。
以前はハックなどを使用してむりやり表示させていましたが、いずれバージョン7へ、さらには8へと、置き換わってゆくでしょうから、今回はそのままにしておきます。

Safari 3（Mac）の場合

当然、意図したとおりの表示であり、透過やボカシ影以外にも、border-radiusにより画像を使わず角丸の表現が可能となっています。
このほか、画面右側の画像にマウスカーソルを合わせると、まわりが光ったようになりますが、これもbox-shadowによるものです。（図7）

さいごに

Firefox 3のように、rgbaに対応しているだけでも充分ですね。
現状ではSafari 3とFirefox 3くらいなので、残念なところではありますが...。
しかしそれでも、苦労して、または無理やり、ボカシ影を再現するよりも、このままのほうがスマートで良い気がします。
ブラウザーによって見栄えの印象はかなり変わりますが、情報は伝わりますので。

この結果、画像が7つ不要になって7.3KBほど減り、さらにCSSファイル自体も2.3KBほど減ったため、単純に計算して約9KBのダイエットができました。
また、"CSSオン＋画像表示オフ"の設定にしている環境でも、画像表示オンとほぼ同様の表示を得られます。

メリット: 画像ファイルの数と容量の削減; CSS容量の削減; 空divの除去; 画像オフ設定でも背景が残るためあまり見づらくならない; 背景色の変更などが容易
デメリット: Safari 3以外では意図した表示にならない; 一部の環境では文字などが重なってしまうところが出てくる可能性がある

以上のように、メリットのほうが多いように感じられるので、しばらくはこの状態にしておこうと思います。

ちなみに、Windows版のSafari 3でも、Mac版とほぼ同様の表示でした。
WindowsユーザーでSafari 3未体験の方、よろしければぜひ一度お試しください。