Firefox11の画像だけの表示を行った時の表示形式を以前に戻してみる

CSS

昨日のやり方は直接的で正しく効果が発揮されるのだけれど、
如何せん、実現方法に手間がちょっとかかったり、運用面で問題があったりと、あまり良いものではないと思う。
しばらくこれで使ってみるとは言ったもののやっぱり気になったので、もう少し考えてみた。

実は昨日の時点で、ユーザプロファイルのchrome/userContent.cssに、

html > body > img:only-child { position: static !important; }

のエントリを作ることで中央表示が解除され、左上寄せ表示にすることはできていた。
ただし、これだけでは黒背景に画像が表示される形なのは同じである。
画像だけを表示した場合のみ、背景の色を変える方法で悩んでしまっていたのだった。
上のエントリは、htmlの直接の子要素にbodyがあり、
その直接の子要素にimgがあり、このimgのみがbodyの子要素であるようなimgに対する選択子になっている。
これは、画像だけを表示したときの状態そのものなので、
このエントリでTopLevelImageDocument.cssのimg要素に対する画像の中央への表示の指示は上書きできる。
ところが、TopLevelImageDocument.cssでのbody要素に対する背景色の指示を上書きするには、
html>body>img:only-childを持つようなhtml>bodyに対してのみ指示しないといけないが、
どうやれば実現できるのか悩んでいたわけである。
html>body全般に対して指定してしまっては大問題である。

で、今までだってそうだったわけだが、結局アドホックなやり方でとりあえず解決した。
ユーザプロファイルのchrome/userContent.cssに、

@-moz-document regexp(".*\\.(png|jpg|jpeg|gif)")
{
html > body { background-color: #fff !important; }
html > body > img:only-child { position: static !important; }
}

というエントリを作った。
つまり、FirefoxにおけるCSS拡張のひとつ、@-moz-document規則を利用して、
末尾が「.画像の拡張子」であるような正規表現にマッチするURLの場合にだけ、
選択子にマッチした要素への指示を適用するようにしている。
とりあえず、画像の拡張子はpng, jpg, jpeg, gifで自分的には十分と思うが、
必要に応じて増やす必要があるかもしれない（このあたりが場当たり的）。
前述のようにimg:only-childの方は@-moz-document規則の外に出してもいいと思うが、
上のエントリとまとめた方が分かりやすいので一緒にしている。

以上のようなエントリを持つchrome/userContent.cssを作り、
omni.jaはオリジナルのものに戻し、
Firefoxを起動、画像だけを表示してみると……
うん、白地に左上寄せ表示になっており、うまくいっている。
念のため、スタイルエディタでTopLevelImageDocument.cssはコメントアウトしていないオリジナルのものが使われていることを確認した。
つまり、TopLevelImageDocument.cssの設定をchrome/userContent.cssのエントリでちゃんと上書きできている。

まあ、これでうまくいっているのだが、この方法の汎用性を高めるには、
上述したように、png, jpg, jpeg, gifだけでは多分足りないだろうということが一つある。
もう一つ、URLとして、foo.jpg?bar=0のようにクエリが付いていたり、
foo.png#zotのようにフラグメントが付いているものに、
上で書いた正規表現ではマッチしないという問題がある。
自分の使い方ではそのようなURLの画像を単独で表示するような場面がないので、
正規表現はシンプルに上で書いたようなものになっているが、
必要が出てくればクエリやフラグメント付きのURLに対応した正規表現にしてみようとは思う。

何にせよomni.jaを書き換えるよりもかなり穏便な手段で同じことが実現している感じなので、
アップデートで上書きされる心配はないこの方法で様子を見てみることにする。

最後に念為、Firefoxのユーザプロファイルの場所については、
去年の勤労感謝の日にコンテクストメニューの変更をした時の記事に少し書いた。
その記事ではchrome/userContent.cssではなくchrome/userChrome.cssにエントリを追加しているが、取り扱いは同様にできる。
最初からchromeディレクトリが存在していれば、サンプルファイルのuserContent-example.cssがあるはずなので、
これを元にしてuserContent.cssを作成すればいい。

追記：
Firefoxのユーザプロファイルの場所は、
メニューの「ヘルプ」→「トラブルシューティング情報」で出てくるページの、
「アプリケーション基本情報」表のプロファイルフォルダ欄にあるボタンで開くこともできる。
でもこのフォルダという用語はいかにもWindows的なので他のOSではこのあたりどうだっただろうか*1。
トラブルシュートするほどのトラブルに見舞われないので、このページの存在自体ほとんど忘れかけていた。

*1:追記の追記：確認したがUbuntuのFirefoxでもフォルダだった。何か嫌だ。