FirefoxのuserContent.css

FirefoxのuserContent.cssでサイト毎の印刷用のスタイル指定を行うための小技

春になってサイトのリニューアルが目立つ。 新聞社系でもasahi.com東京新聞(TOKYO Web)がリニューアルされた。 で、仕事上、新聞社の記事を印刷する機会が多いのだが、余計なものまで印刷したくはない^^;

そこでユーザスタイルシート(FirefoxではuserContent.css)の登場となる。 Firefoxには、サイト毎にスタイル指定を記述できる@-moz-documentという@ルールがあって、これはかなり便利。

しかし、これに@mediaルールを組み合わせて、サイト毎の印刷時のスタイル指定を記述しようとすると、うまくいかない。 例えば、下記のように記述してもダメで、@ルールの入れ子はどうやら無視される。

@media print {
  @-moz-document domain(asahi.com) {
    #right {
      display : none;
    }
  }
}

では、どうすればいいのか? そんな時の小技。

サイト毎の印刷用指定をする場合は@importで別ファイルに

表題の通り、単に外部ファイルにしてインポートすればいい。 例えば、userContent.cssには

@import 'userContentPrint.css' print;

と記述して、で、外部ファイルのuserContentPrint.cssでは

@-moz-document domain(asahi.com) {
  #right {
    display : none;
  }
}

といった具合に、この中で好きなだけ@-moz-documentを使って書けばいいのであった。

CSSの仕様に即して考えれば当たり前の話なのだが、とはいうものの、自分にとってはユーザスタイルシートで@importが使えるなんて盲点だったので、この正答にたどり着くまで実はかなり試行錯誤した。 まぁ、試行錯誤は毎度のことではあるが^^;;

"FirefoxのuserContent.css"へのTwitter上でのコメントやRT

1件のツイートがあります。

ツイート 1