SmallStyle

_ FEEDBRINGERを@-moz-documentを使って改良

WebベースのRSSリーダーといえば，Bloglinesが有名ですが，先日FEEDBRINGERという新しいWebベースのRSSリーダーが登場したようです．Bloglinesはここのところよくメンテナンス状態になってしまうし，なんだかレスポンスも以前に比べて悪くなったような気がします．そんなわけで，他に何かいいWebベースのRSSリーダーはないかなと思っていたところでした．

ざっと使ってみた感じは，Ajaxを使っていてさくさくと動いてくれます．さっそくBloglinesのデータをエクスポートして，FEEDBRINGERにインポート．そうすると，リストが多いとBloglinesとは異なりフレームを使っていないから画面全体のスクロール量が増えることに気づく．…使いづらいぞ．ただのにっきでもあげられていますが，未読のfeedをクリックするとページのトップに飛んで，またスクロールして…っていうのは結構面倒．ということで，やはり同じ思いを抱く人はいるようで，greasemonkeyを使って対処されている方がいました．

私もFirefoxを利用しているのですが，最近はTrunkを利用しているためgreasemonkeyが使えません．そこでuserContent.cssを利用してFEEDBRINGERをユーザースタイルシートでいじることにしました．ここでサイト別にCSSルールを適用させる@-moz-documentが使えます．これ自体はGecko/1.8a3くらいから有効らしいです．ちなみに私の利用しているFirefoxのGeckoのバージョンはGecko/1.8b4なのでこのルールが利用できるのですが，URIidという拡張を使っても，似たようなことができるようです．

で，実際に作成したCSSは以下．とりあえずざっと作ってみた感じですが，それなりに使い勝手は向上したような気がします．ついでにデザインも多少変更．とりあえずフィードの部分のみ適用．（@-moz-document url-prefixを利用すればURLの先頭がマッチするものに対して有効になる）

@-moz-document url-prefix(http://feedbringer.net/feed) {
#logo-container {
background: #E7E3D0 !important;
}

#tool {
display: none !important;
}

#nav {
color: #fff !important;
background: #5E766B !important;
}

#nav a {
padding-left: 0.3em !important;
padding-right: 0.3em !important;
}

#nav a {
color: #fff !important;
border-bottom: none !important;
}

#nav a:hover {
border-bottom: none !important;
color: #FFD264 !important;
background-color: transparent !important;
}

#nav .border {
border-top: none !important;
border-bottom: solid 1px #333 !important;
}

#container {
padding: 0 !important;
height: 80% !important;
border-bottom: solid 1px #333 !important;
}

#side {
position: static !important;
height: 100% !important;
overflow: scroll !important;
float: left !important;
border-right: solid 1px #333 !important;
}

#main-container {
margin: 0 !important;
padding-left: 1em !important;
padding-right: 1em !important;
background: #E7E3D0 !important;
overflow: scroll !important;
height: 100% !important;
}

#main .feed, #popular .feed {
background: #fff !important;
}

#main .feed-title, #popular .feed-title {
color: #666 !important;
background: transparent !important;
}

#main .feed-entry-title {
background-color: #757575 !important;
color: #fff !important;
}

#main a:hover.feed-title,
#popular a:hover.feed-title,
#main a:hover.feed-entry-title {
color: #fff !important;
background: #5E766B !important;
}

#main .feed-entry-information, #main .clip-information {
border: 1px solid #757575 !important;
}

#main-help {
color: #000;
background: #fff;
}

#main-padding {
display: none;
}
}

@-moz-documentについてはoutsider reflexで簡単な説明がされています．

ちなみにスタイルシートをテストする際にはいくつかのBookmarkletが活躍しました．JavaScript::Bookmarkletの「スタイルをテスト」と「CSS解除」，それからページの構造を調べるためにMouseover DOM Inspectorを利用しました．

2005-08-26追記：標準で擬似フレームを用いたインターフェースを利用できるようになりました．上記コードは現在そのままではりようできません．