[ thyna ] >
[ ]
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だけですが。
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レンダリングをしてくれます。こんなん出ました。
以下、検証結果。完全に正しい表示をしているのはApple WebCoreベースのSafariとShiiraだけですが。
Mac OS 9 透明色 回り込み font指定 シャドウ 外部js Netscape 7.02 ScreenShot ◎ ○ ○ X ○ WaMCom 1.3.1 ScreenShot ◎ ○ ○ X ○ Internet Explorer 5.1.7 ScreenShot ○ ○ X X ○ Opera 6.03 ScreenShot ○ X X X △ Netscape Communicator 4.8 ScreenShot X X X X X Mac OS X Safari 1.2.3 (v125.9) ScreenShot ◎ ○ ○ ○ ○ Shiira 0.9 ScreenShot ◎ ○ ○ ○ ○ Netscape 7.1 ScreenShot ◎ ○ ○ X ○ Firefox 1.0 preview release ScreenShot ◎ ○ △ X ○ Internet Explorer 5.2.3 ScreenShot ○ ○ X X ○ OMNI WEB 5.1β3 ScreenShot ○ ○ ○ ○ X iCab 2.9.8 ScreenShot ○ X △ X △ Opera 7.5.4 public beta ScreenShot ○ X △ X △ Windows 2000 Netscape 7.1 ScreenShot ◎ ○ ○ X ○ Internet Explorer 6 ScreenShot X ○ ○ X ○ Opera 7.5.3 ScreenShot ○ X X X ○ Sleipnir 1.6.6 ScreenShot X ○ ○ X ○ Lunascape 1.4.1 ScreenShot X ○ ○ X ○ Windows XP Internet Explorer 6 ScreenShot X ○ ○ X ○
透明色 ◎: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レンダリングをしてくれます。こんなん出ました。