Firefox 2.0 Beta 2 のタブ:独自レンダリング

2006年9月2日(土) 12時27分 by level
B ?
Tags: Firefox, タブ

スラドに以下のような投稿がありました。

Firefox 2.0β2リリース - 新しい標準テーマはタブがみにくい

標準テーマが新しく変更されるようですがOSのテーマを無視して独自にタブを描画するようになったために、OSの設定によっては大変醜くなります。

Windows2000でプリセットされているものの中では、ハイコントラスト #1、同 #2、同 黒でタブ上の文字がほとんど読めません。タブバーは白い帯として浮いて見えます。 背面タブ上の文字をこれも独自に淡色化しているためハイコントラスト 白 で背面タブ上の文字のコントラストが落ちてしまいます。

できれば標準テーマはOSのテーマに沿った描画をしてほしいと思います。

ちょっと気になったので試してみました。OS は Windows XP です。

9/4追記

バグが登録されていました。blocking バグです。
Bug 349700 - Tabs do not inherit high contrast settings

バグのコメントにあった、ハイコントラストモードにするショートカット: Shift+Alt+PrintScreen というのは面白いです。画面のプロパティから変更するときは、裏で描画が終わってから画面が切り替わりますが、こちらはぱらぱらと画面が書き換わってゆきます。(追記終わり)

9/8追記

とりあえず、ハイコントラストの問題は解決しました

Windows XP スタイル

Windows XP スタイルには配色が3通りしかないので全部示します。

規定(青)

Windows XP スタイル、規定(青)

オリーブ グリーン

Windows XP スタイル、オリーブ グリーン

シルバー

Windows XP スタイル、シルバー

いずれも視認性という意味では問題はありません。

Windows クラシック スタイル

多くの配色がありますが、一部のみ。

Windows スタンダード

Windows クラシック スタイル、Windows スタンダード

ハイコントラスト #1

Windows クラシック スタイル、ハイコントラスト #1

ハイコントラスト 黒

Windows クラシック スタイル、ハイコントラスト 黒

フォントの色はテーマに従うものの、タブの背景はテーマによらず不変の同色描画なので、白または薄いグレーの背景色に薄い色のフォントが埋もれてしまうケースがあります。新テーマは背景タブにマウスオーバーしたときに微妙に背景を変化させており、それを実現するための独自描画でしょうか。

Firefox 1.5 ハイコントラスト #1

Firefox 1.5、Windows クラシック スタイル、ハイコントラスト #1

Firefox 1.5 では、OS のテーマに沿った描画であるのでハイコントラスト系でも視認性は確保されています。

最新ナイトリー

Firefox 2.0 2006090103

なお「背面タブ上の文字をこれも独自に淡色化している」は最新のナイトリー(2006090103)ではなくなって、タブの色を濃くするようになっていました。正式版までにまだ微調整があるかもしれません。

9/8更新

Windows クラシック スタイル、ハイコントラスト #1(9/8版)

くでんさんの報告のとおり、2006090803 では、ハイコントラスト #1 でも視認性が確保されています。タブの状態は左から、アクティブ、バックグラウンド+マウスオーバー、バックグラウンドです。

Windows XP スタイル、規定(青)(9/8版)

一方、Windows XP スタイルは、マウスオーバー時の変化がほとんど識別できません。

最終更新: 2006年9月9日(土) 10時6分

コメント (6)

1 9/02 20:05 Cube
(c1) [2006/09/02 20:05:48] by Cube

個人的には背面タブのFaviconも薄くなるのは視認性も上がっていい感じだったんだけど、色覚障害のある方にとっては看過できない大問題か。別アプローチで再現可能ならがんばって欲しいところ。

あとブックマークや履歴などのツールバーアイコンが表示時に色の濃淡だけで表現されてるのも視覚障害者からは辛いんではないかな?デザイン上譲れない点もあるんだろうけど、1.5系みたくエンボス処理されてた方が視認性も良かった気がする。

2 9/04 12:17 level@管理人
(c2) [2006/09/04 12:17:51] by level@管理人

Windows classicスタイルとの相性についてはいろいろ言及があるみたいですね。
Asa Dotzler - Firefox and more: new firefox theme: what do you think?
http://weblogs.mozillazine.org/asa/archives/2006/09/new_firefox_the.html

>背面タブのFaviconも薄くなる
これは本文の最後で述べたように、最新のナイトリーでは修正されて
背景色だけが変化するようになっています。

3 9/06 01:26 音吉
(c3) [2006/09/06 01:26:26] by 音吉

Windows の場合拡張で追加したツールバー・ボタンがマウス・オーバーで変化しなくなってるのも結構痛いです(Linux の場合はチャンとエンボスされるのですが)。
仕方ないのでトリアエズ
toolbarbutton:hover{
background-color: #999999 !important;
}
としています。今の所最新 BonEcho でも変化なし
Mozilla/5.0 (Windows; U; Windows NT 5.1; ja; rv:1.8.1b2) Gecko/20060905 BonEcho/2.0b2
Mozilla/5.0 (X11; U; Linux i686; ja; rv:1.8.1b2) Gecko/20060905 BonEcho/2.0b2

4 9/06 12:12 level@管理人
(c4) [2006/09/06 12:12:57] by level@管理人

確かにそうですね。別途濃いボタンを追加することになるのでしょうか?
で、ブックマークツールバーは従来どおりエンボスなんですね。

デフォルトテーマのボタンが薄いという意見は良く聞きますが、現マウスオーバー時の配色をデフォルトにして、マウスオーバー時の表示はエンボスというのが一番無難なような気がします。

5 9/06 13:13 音吉
(c5) [2006/09/06 13:13:15] by 音吉

> デフォルトテーマのボタンが薄いという意見は良く聞きますが、現マウスオ
> ーバー時の配色をデフォルトにして、マウスオーバー時の表示はエンボスと
> いうのが一番無難なような気がします。
それば一番良いと思います。

実はナントカ自前でエンボスするようにイロイロ書いて見たのですが
ボタンによってノビ・チジミしたり、ツールバーが揺れ出したり、で
結局、background-color で誤魔化しています。

6 9/08 21:10 くでん
(c6) [2006/09/08 21:10:39] by くでん

Bug 350689・Bug 350690の修正が入りました。これによりタブまわりの背景色に-moz-dialogが反映されるようにされたのでBug 349700も解消されているはずです。
解決法としては移動ボタンや検索ボタンと同じで、画像による完全に非OSネイティブのデザインから、透過pngにハイライトとシャドウのみをつけた画像を使って背景色を透過させつつ立体感を表現する手法に変わりました。正直、まだ明瞭さが足りずにタブとタブがぱっと見分けにくい感じはしますけど。

トラックバック (1)

トラックバックは検索対象外です。

この記事にリンクしているページ < >

  1. データがありません。