Sat - October 30, 2004

PNG画像の透明色とcssの適用


これをMac OS (9、X 10.3)とWindowsのいろんなブラウザで動作を調べてみました。リファで利用者が多いもの(バージョンは最新のもの)だけですが、色々見えてきます。ブラウザ選びの参考にどうぞ。(11/12追記)

本来ならWindows XPで検証すべきなんだろうけど、XPマシンには一切余計なものを入れたくないのでパス。Webレンダリングの実装には大して差はないでしょ、と勝手に判断してみる(MS純正のInternet ExplorerはService PackなりPatchなりで吸収されてるはずだし、他のブラウザはExplorerのエンジンを流用してるか、完全に自前かどちらかだろうからね)。

以下、検証結果。完全に正しい表示をしているのはApple WebCoreベースのSafariとShiiraだけですが。
Mac OS 9透明色回り込みfont指定シャドウ外部js
Netscape 7.02ScreenShot
WaMCom 1.3.1ScreenShot
Internet Explorer 5.1.7ScreenShot
Opera 6.03ScreenShot
Netscape Communicator 4.8ScreenShot
Mac OS X
Safari 1.2.3 (v125.9)ScreenShot
Shiira 0.9ScreenShot
Netscape 7.1ScreenShot
Firefox 1.0 preview releaseScreenShot
Internet Explorer 5.2.3ScreenShot
OMNI WEB 5.1β3ScreenShot
iCab 2.9.8ScreenShot
Opera 7.5.4 public betaScreenShot
Windows 2000
Netscape 7.1ScreenShot
Internet Explorer 6ScreenShot
Opera 7.5.3ScreenShot
Sleipnir 1.6.6ScreenShot
Lunascape 1.4.1ScreenShot
Windows XP
Internet Explorer 6ScreenShot
透明色 ◎:PNG画像の透明色指定、あれこれポップアップの半透明ともに正常動作
○:PNG画像の透明色のみ正常動作、あれこれポップアップが表示されない
X:PNG画像の透明になるべき箇所が透明にならない、重ね合わせた色がおかしい
回り込み ○:画像の横にテキストが回り込む
X:テキストが回り込まずに改行される
font指定 ○:すべてのfontにおいて、cssで指定したものが使用される
△:サイドメニュー、日付などの欧文fontはcssで指定したものが使用される
X:欧文fontにブラウザで設定した基本設定fontが使用されてしまう
シャドウ ○:エントリタイトル部分にcssで指定しているドロップシャドウ効果が有効
X:ドロップシャドウ効果が反映されない
外部js ○:外部参照しているjavascriptが正常に動作している
△:外部参照しているjavascriptは表示されるが、文字化けが起きる
X:外部参照しているjavascriptが表示されない

PNGの透過については、WinのIEエンジンを使っているブラウザがアウト。あれこれポップアップの半透明部分はjavascript内部でAlpha channel blendingを実装しているから大丈夫でも、PNGの半透明ビット自体が正常に処理されていないため、ヌキになる部分がグレーになってしまっています。

以降の項目はcssの解釈について。回り込みはほとんどのブラウザでokなんですが、iCab、OperaではNG。OS9のiCabに至っては、ページを開こうとするだけでアプリがクラッシュ。ここのサイトだけじゃないのが微妙…。Omni Webの古いバージョンでも回り込みができてなかったような記憶があるけど、今は問題ないのでいいや、と。

fontの指定は、書き方によっていろいろあるかもしれないので、日本語フォントの再現性についてはひとまずパス。実際に見てみると、欧文fontすら無視されるのは困る事があるかもしれない。設定が悪いのか?ヒラギノフォントを指定している箇所も、OS9ではATMをインストールしているので反映されるはず…なのにねぇ。Winの方はヒラギノ入れてないので、欧文フォントのみで判断してます。

シャドウの処理はあまり有効になるブラウザがありません…これはcss2の機能だっけ?
外部javascriptについては、どうしてこんな問題が起こるのか見当もつきません。ウチの環境に限らず、プロバイダ各社が提供しているblogサービスでも問題続出のはずなんだけど。

全般的にNetscape、Mozzila系が優秀です。4.xの頃のcss駄目な子っぷりが嘘のように改善されてますね。そしてIEが常々「シェアNo1を取った途端に進化を止めたブラウザ」と言われるように、独自拡張が多い割には比較的標準な書式が有効になりません。OperaはOS問わず、あまり奮わず。出たばかりの頃、かなり期待していたんですけどねぇ。

…と、こんな感じの結果になりました。推奨ブラウザがSafari(Web Core系)というのは変わりないのですが、Safariが使えない環境でもNetscape、Mozilla系でかなり忠実なHTMLレンダリングをしてくれます。こんなん出ました。

Categories
Total entries:

Archives
rss