朝顔日記

Firefox の反転色

2005-04-20

中野さんらの尽力により、0419 版のナイトリーで Bug 56314 - reverse selection colors when page background is similar to default selection background が修正された。そこで以下のようなテストケースを作ってみた。選択して色を反転させてみてください。

背景画像に使ったのは、以下のふたつの画像です。

 白背景用画像 ネイビー背景用画像

1. black text on white back
style="color:black;background:white;"
2. white text on navy back
style="color:white;background:navy;"
3. black text on white back with background image
style="color:black;background:white url(img/white.png);"
4. white text on navy back with background image
style="color:white;background:navy url(img/navy.png);"
5. Bad white text on navy back with background image
style="color:white;background:url(img/navy.png);"

ナイトリーを使っていらっしゃらない方には何のことやらわけがわからないと思うので、スクリーンショットも載せておきます。まずは、今回の修正が入っていない 0418 版のスクリーンショット。

0418 版のスクリーンショット

一見よさそうに思えますが、テストケース なんかだと、一体どこが選択されているのかわからないような場合が多々あります。

続いて、Firefox 1.0.3 のスクリーンショット。

Firefox 1.0.3 のスクリーンショット

こっちは、背景色が濃い色だと選択範囲を識別するのがかなり困難です。うんこですね。:p)

今回の修正の入った 0419 版のスクリーンショット。

0419 版のスクリーンショット

背景色を調べて、それに基づいて選択領域の背景色を決めるというようなアルゴリズムらしく、かなりいい感じです。が、最後の 5. Bad white text on navy back with background image だと、駄目になります。背景画像を指定してあっても適切な背景色が指定されていないからですね。こういう指定の仕方は反転した場合だけでなく、画像オフな環境で読めなくなる可能性が高いのでよくないですね。

おまけで、winIE6 のスクリーンショットも載せておきましょう。

winIE のスクリーンショット

winIE も結構良さそうです。

結論というのは特にないですが、背景画像を指定するときは、背景色も忘れずにってことで。

「Firefox の反転色」へコメントをつける

書き込み時の挙動について
URI らしき文字列には自動的にリンクが張られます。また "<" や、">" は実体参照化されます。
スパム対策のため、リファラを切っていると投稿できません。

この記事の永続的 URI ならびに トラックバック ping URI
http://diary.noasobi.net/2005/04/diary_050420a.html