Stylish のスタイル管理画面をまだらに

2006-09-27

Firefox の外観や閲覧するページの外観をユーザスタイルシートでカスタマイズするのに便利な Stylish という拡張機能があるのですが、管理画面がやや見づらかったので改善するユーザスタイルシートを書いてみました。


@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
treechildren#styles-children::-moz-tree-row(even) {
  background:#efefff;
  color:#000000;
}

treechildren#styles-children::-moz-tree-row(odd) {
  background-color: #feffff;
  color:#000000;
}

これを使う前は、以下のスクリーンショットのような感じ。

で、スタイル適用後のスクリーンショットは以下のような感じ

Stylish 3.2 以降をお使いの場合は、Stylish Manager striped style | userstyles.org よりお手軽にインストールできます。まぁ、Stylish 使っていない人には用事のないスタイルなんですが。:p)

元ネタは、サイドバーのブックマークや履歴を見やすくするだったりします。多謝。＞くでんさん

んで、そもそも Stylish って何よ？という方は、スクリーンショットがやや古くなっていますが、Stylish いいよをどうぞ。

コードをちょっと修正しました。

「Stylish のスタイル管理画面をまだらに」へコメントをつける

この記事へのツッコミ

1: おおやま (2006-09-27T18:55:30+09:00): 　エントリーと関係ない話で申し訳ないのですが、最近の朝顔日記ですが、Firefox 1.5.0.7 で閲覧しようとすると以下のエラーにて閲覧することができません。

XML パースエラー: 要素が見つかりません。
URL: http://diary.noasobi.net/2006/09/diary_060927a.html
行番号: 1, 列番号: 1:
2: くでん (2006-09-27T18:57:03+09:00): 配色としてはJaneStyleから持ってきているので、それと同じ感じにしようとしたら偶数の列の#efefffに加えて奇数の列が#feffffですね。
treechildren#styles-children::-moz-tree-row(odd) { background-color: #feffff; }
プロパティについては
http://www.xulplanet.jp/xultu/treestyle.html
OS XのSafariがこういう列ごとに互い違いの配色を部分的に使っててかわいいので、需要がありそうなユーザスタイルなんですが……
http://images.apple.com/jp/safari/images/index_bookmarkwindow.jpg
3: のり (2006-09-27T21:51:15+09:00): 以前このようなことがありました。
http://diary.noasobi.net/2005/07/diary_050718a.html
まさか、また Firefox のバグということはないと思いますが、なんなんでしょうね。私のところでは再現しないんですよ。
「要素が見つかりません。」とのことですが、ソースを開いても中は空っぽなんでしょうか？
また、最近閲覧できないとのことですが、アクセスすると必ずパースエラーが発生しますでしょうか？
4: のり (2006-09-27T21:57:02+09:00): web ページでも table なんかでこういうスタイルが手軽に使えるようになるといいんですがねぇ。＞くでんさん
5: iimu (2006-10-02T17:24:10+09:00): CSS3にも:nth-child()擬似クラスというのがありますので、期待しましょう。
http://zng.info/specs/css3-selectors.html#nth-child-pseudo
6: のり (2006-10-02T17:46:53+09:00): Gecko エンジンの場合だと、support for :nth-*() pseudo-classes（bug 75375）とか、add support for pseudo-classes accepting argument(s)（bug 75374）辺りだと思うんですが、なかなか進展がないようですねぇ。
7: おおやま (2006-10-02T23:31:23+09:00): 　エラーの件ですが、ソースを表示させると空になってますね。
　リロードすると文字化けをおこして CSS も反映されずに表示されることもあります。
8: おおやま (2006-10-02T23:46:59+09:00): 　それと文字化けしているときの文字コードが Shift-JIS になっています。

　application/xhtml+xml でコンテンツを送っているのに先頭行に xml 宣言が入っていないことって関係ないですかね？

　ローカルに落としてみて、text/html で表示させるとちゃんと表示されます。
9: のり (2006-10-03T16:39:30+09:00): application/xhtml+xml を解する UA には、xml 宣言を出力し、application/xhtml+xml として送出し、解さない UA（IE とか）には xml 宣言無しで、text/html で送出しているはずなんですが…。
文字化けしているときに、css が適用されないのは、文字化けしてからだと思うので、手動でエンコードを utf-8 にすれば、治ると思われます。
もしよければ、不調の時に
http://web-sniffer.net/
を使って、帰ってくる HTTP Response Header のおかしな点などがあれば教えていただけると原因究明の役に立つかもしれません。
よろしくお願いいたします。
10: おおやま (2006-10-03T20:53:05+09:00): HTTP/1.x 200 OK
Date: Tue, 03 Oct 2006 11:47:07 GMT
Server: Apache/2.0.59 (Unix) PHP/5.1.6
X-Powered-By: PHP/5.1.6
Last-Modified: Tue, 03 Oct 2006 11:47:05 GMT
Etag: "542c538ba561a678cf3c9993cdec25ba"
Keep-Alive: timeout=15, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/xhtml+xml; charset=UTF-8

　こんな感じです。
11: おおやま (2006-10-04T07:56:50+09:00): 　どうもメールで送ったスクリーンショットで表示されるときは、head 要素がちゃんと解釈されていないですね。

　それと「ページの情報」で確認してみたら content-type が text/html で、広報互換モードで表示されているようです。

　ソースを表示したら正常に表示されています。なんとなくですが、Gecko のバグっぽい気がしてきました。
12: のり (2006-10-04T11:08:20+09:00): web-sniffer の結果は、正常に表示される時のもののように見えますが、異常があった時のものでしょうか。もっとも、web-sniffer を経由したときは正常だったということも考えられますが。であれば、Live HTTP Headers あたりを使って監視しないと駄目かなぁ。
送っていただいたスクリーンショットを見る限りは、head 要素の一部が欠落しているような感じですねぇ。
あと、気になるのは、ページ末尾に HTTP Response Header と思われる文字列が混入している事ですね。何でそんなことになるのか想像がつきません。

もう少しお付き合いいただけるのであれば、拡張等、すべて無効にした状態、あるいはセーフモードで試して頂けるでしょうか。もしかしたら、なんかの拡張が悪さしているということも考えられます。
13: おおやま (2006-10-04T16:18:50+09:00): 　すいません。
　ログは Live HTTP Headers を使用して取りました。http://web-sniffer.net/ では帰ってくるログはエラーメッセージのものでしたので。

　ちょっとこれから拡張周りを探ってみます。
14: おおやま (2006-10-04T16:57:12+09:00): 　結論だけ。
　NoScript で朝顔日記の JavaScript を許可してやると正常に表示されるようになりました。

　あとの詳細はわかりかねます。
15: おおやま (2006-10-04T17:20:25+09:00): 　ちなみに NoScript を無効にしても、やはりエラーメッセージ画面になっていました。

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

朝顔日記

「Stylish のスタイル管理画面をまだらに」へコメントをつける

この記事へのツッコミ