FirefoxのuserContent.cssネタ

Firefox 1.5 Beta 1よりURLやドメインなどでCSSルールを切り分けることが可能になりました。これによりuserContent.cssがとてもいじりやすくなった(あるサイト向けにテキトウに書いても他のサイトに誤爆しなくなった)ので、userChrome.cssと同じくガリガリいじると楽しいようなそうでもないような感じです。

`_blank`なリンクのカーソルを変更

a[target="_blank"] {
  cursor: alias !important;
}

cursor: crosshair !important;とかやってる人が多いことと思われますが、1.5 Beta 1から先取りサポートされたaliasにするとより直観的に把握できるようになると思います。

View Page Sourceのフォントを固定する

body#viewsource * {
  font-family: 'MS Gothic', monospace !important;
  font-size: 9pt !important;
}

View Page SourceのフォントはFirefoxのフォント設定に引きずられるようなので、ISO-8859-1なページはCourier Newとかで表示される(ことが多い)のがちょっとアレ。./res/viewsource.cssをいじるという方法でも可能ですが、userContent.cssでやればバージョンアップする度に修正しないで良いので楽です。

Bloglinesのチャンネル画像を隠す

@-moz-document domain(bloglines.com) {
  div.channel > img {
    display: none !important;
  }
}

無闇にでかい画像だったりすることがたまにあって、すごい邪魔なので。

Bloglinesの`pre`の横幅を制限

@-moz-document domain(bloglines.com) {
  td.article pre {
    width: 90% !important;
    overflow-x: auto !important;
  }
}

preでページの横幅が広がり、横スクロールをしながらでないと読めない状態とかになることが稀にあるので。preがちょっと読みづらくなる感じですが、まぁそれはそれ。

Gmailのメール本文を等幅フォントに

@-moz-document domain(mail.google.com) {
  div.msg > div.mb {
    font-family: monospace !important;
  }
}

同じことを実現する拡張とかもありますが、「userContent.cssでやった方がお手軽じゃね？」とかなんとか。

ITmediaを見やすく

@-moz-document domain(itmedia.co.jp) {
  table.vbody {
    width: 100% !important;
  }

  div#logoline {
    width: 100% !important;
  }

  div#banner {
    display: none !important;
  }

  div.lc {
    margin-right: -40px !important;
  }

  div.rc {
    display: none !important;
  }

  div.l600 {
    margin-right: 40px !important;
  }
}

右のサイドバーを取っ払い、横幅1024ピクセル以上に最適化されているのを完全にリキッドに(横スクロールバーが出ない)。一部のページで右のサイドバーが重要なナビゲーションになっていたりするようですが気にしない方向で。

追記

ITmediaのCSSルールが横スクロールバーが出たり出なかったりという感じだったので、もう少しマージンに余裕を持たせてみました。これで大体大丈夫な感じ。