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
古い記事への自己言及 @documentはとっくに-mozのプリフィクスいらないんだね 仕様自体はCSS4に先延ばしになってるようだけど @document - CSS | MDN https://t.co/oC2HZiBALn / http://t.co/pNC6vflwjJ