Firefoxで透過画像の背景を市松模様にしてみる

FirefoxはIEやChromeと違い、画像を直接開くと中央寄せされ
周りが黒に近いグレーで覆われて表示される。

個人的にこの仕様すごく好きだ。
左上だと視線移動が辛い（特に小さい画像）し、
周りが暗背景だから目に優しいし、
白背景の画像の場合どこまでが画像による白なのかがはっきりわかる。

が、強いて言うなら不満が1つ。
背景が透過なのかそうでないのかがパッと見でわからない。
（これはIEやChromeもそうだが）

▲このグレー部分は透過なのか？　元からこういう色なのか？

ってなわけで

我らがリーダーStylish様を使用し、透過部分を市松模様にしてみる。

【追記 2017/03/10】
最新のFIrefoxで動かなくなってたのを修正。
尚、記事中の画像は古いまま。

@media not print {
	html > body > img.transparent:hover:only-child {
		background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAGUExURf///8jIyFziA0IAAAAQSURBVAjXY2D4z4AV4RAGAH6/D/FazXqaAAAAAElFTkSuQmCC") scroll repeat left top !important;
	}
}

このユーザースタイルを入れると

単体で直接透過画像（GIFやPNG）を開き、マウスオーバーした際の背景が市松模様になる。

どの部分が透過されてるのか一目瞭然。

もちろん、透過されてない画像は普通に単色で表示される。

サンプル画像

以下にサンプルとしてFirefoxのロゴ画像うｐしたんで
上記のユーザースタイルを導入した際の確認にどうぞ。

• 透過あり
  • http://file.gutyan.jp/img/Firefox_Transparent.png
• 透過なし
  • http://file.gutyan.jp/img/Firefox_NoTransparent.png

GIFやAPNGもこの通り。

• http://file.gutyan.jp/img/Omega.gif (オメガ)
• http://file.gutyan.jp/img/pikaman_run.png (ピカマン)

このユーザースタイルのただ1つの欠点

言うまでもなく、全サイト全ページに適用される為
このユーザースタイルを適用した状態で
bodyタグ直下にtransparentというクラスが付いてる
imgタグが1つだけ存在するページにアクセスすると
その画像の背景が市松模様になってしまう。

そんなページまずないとは思うが、どうしても気になるって人は
Firefoxインストールフォルダにあるomni.jaファイル（実体はJAR＝ZIP）を展開し
中にあるTopLevelImageDocument.cssというファイルに
上記のユーザースタイルを書き足し、再度ZIPで固め直すと良い。

但しこの方法はFirefoxの内部ファイルを直接弄る事になる為
バージョンアップした際に本家の新しいomni.jaで上書きされ
変更内容が元に戻ってしまう可能性が高い。

余談

こういう細かいところまで弄れるのはFirefoxの強みってか特権だよね。
私がChromeをメインに使ってないのもこんな感じの理由。