Home> 備忘録: 2007年2月アーカイブ
備忘録: 2007年2月アーカイブ
Sage のツールバーの改造
- 2007年2月26日 02:13
- 備忘録
そーいやフィードリーダはこれまで全然使ってなかったなぁ．これからは意識して使うようにするか．と思い立って，とりあえず Sage をインストールした．機能に不満を感じ始めたら他のリーダに乗り換えるだろう，そのうち．
エクスプローラや IE, Firefox などのツールバーのアイコンボタンと言う方が適切か ?は全て小さいサイズ (16 * 16) に変更している俺にとっては，Sage のツールバーのアイコンがやや大きいのが気に食わなかった．だから改造した．と言っても userChrome.css に追記するだけで済んだ．スゲェ，スゲーよ XUL．と言って良いのか ?
→
追記したのは以下の通り．
/* Sage のツールバーのボタンを小さいものに変更する */
toolbarbutton.sage_button {
list-style-image: url("chrome://sage/skin/toolbar-small.png") !important;
}
/* 「更新チェック」ボタン */
#checkFeeds {
-moz-image-region: rect(0px 16px 16px 0px) !important;
}
#checkFeeds:hover {
-moz-image-region: rect(16px 16px 32px 0px) !important;
}
#checkFeeds[disabled="true"] {
-moz-image-region: rect(32px 16px 48px 0px) !important;
}
#checkFeeds:active {
-moz-image-region: rect(48px 16px 64px 0px) !important;
}
/* 「フィードを発見する」ボタン */
#discoverFeeds {
-moz-image-region: rect(0px 32px 16px 16px) !important;
}
#discoverFeeds:hover {
-moz-image-region: rect(16px 32px 32px 16px) !important;
}
#discoverFeeds[disabled="true"] {
-moz-image-region: rect(32px 32px 48px 16px) !important;
}
#discoverFeeds:active {
-moz-image-region: rect(48px 32px 64px 16px) !important;
}
この改造方法はこの記事から着想を得た．要は chrome://sage/skin/sage.css (skin/classic/sage.css) での設定を上書きする形で userChrome.css に書けば良いだけのこと．
- Comments (Close): 0
- TrackBack (Close): 0
userContent.css と mixi
- 2007年2月24日 21:21
- 備忘録
Firefox 1.5 以降では @-moz-document ルールなる Mozilla 独自拡張 CSS が使えるっつーことで，mixi の各ページの瑣末な部分をちょこちょこ修正している途中．例えば，ブラウザウィンドウのサイズを常に 800 * 600 に固定してないと落ち着かない俺にとって mixi のページは常に水平スクロールバーが出るからイヤ，ということで幅を 770px 程度に縮小してみたり．ある程度まとまったら公開するつもり．
いやー，mixi は table レイアウトを駆使してるってことは把握してたけど，実際にソースをじーっと眺めたり Web Developer で table 要素の入れ子の深さを表示させたりするとその異様さに驚愕するわ．「深さ=7」 ってどーゆーことよ．「もっと読む」 とかの右寄せのためだけに table を 1 つ使うってどーゆーことよ．table レイアウトそのものの是非は横に置いておくにしても，いくらなんでももっと簡潔に書けるやろ．
レイアウトや配色の大部分を HTML 側で指定している mixi のページに対して userContent.css でできることはあんまりないのかも．子セレクタやら隣接セレクタやら属性セレクタやらを使いまくるしかないのか．
- Comments (Close): 5
- TrackBack (Close): 0
userContent.css でハマる
- 2007年2月19日 14:13
- 備忘録
- 1 行あたりの文字数がやたら多い行を内部に持つブロック要素
overflowプロパティの値がvisibleであるブロック要素white-spaceプロパティの値がpreまたはnowrapであるブロック要素
上記の要件を満たす要素では，その内部のテキストが当該要素のブロックボックス領域からはみ出て表示され得る (はず．きちんと確認したわけではない)．
こんな読みにくいったらありゃしない表示がなされる典型的な例が，当該プロパティの値が特に設定されていない (= 既定値のままの) pre 要素．なもんだから，技術的な情報をメモってる Web ページを探し回ってる間は割としょっちゅう目にするわけで，その度にイラッとしていた．言うほど大袈裟なもんじゃないけど．
「だったらユーザスタイルシートで回避すれば良いじゃない．それこそが CSS の真髄じゃない」ってことで，以前 userContent.css に以下のような記述を追加していた．
pre {
overflow: auto !important;
}
ところが，これを書き加えてからは view-source ウィンドウでやたら水平スクロールバーが現れまくって気持ち悪い事になってた．めんどいので screenshot は撮ってない．推察するに，1 ページ分のソースを複数の pre 要素で分割して表示しているらしい．何でそんな表示の仕方になってんのかいな．
そんなこんなでつい最近，別経路で DOM Inspector の有用な使い道を知ったんで，さっそく view-source ウィンドウを inspect して見てみた．が，pre 要素は見当たらず．
何なんやろーなーと思いながら適当なキーワードで検索してたら，こちらのページでヒントを得たんで，早速 userContent.css に追記．
pre {
overflow: auto !important;
}
#viewsource pre {
overflow: visible !important;
}
これで意図通り．DOM Inspector で当該 pre 要素が見当たらない件については放置．単にそういう仕様になってるんだろう．
- Comments (Close): 0
- TrackBack (Close): 0
- Newer: 備忘録: 2007年3月
- Older: 備忘録: 2007年1月
Home> 備忘録: 2007年2月アーカイブ
