7

ブラウザからページを印刷する場合、 。print.cssで宣言されたスタイルシートを参照しmedia="print"ます。background-imageブラウザは、などの一部のCSSルールを無効にします。一部のbackground-colorブラウザには、それらを有効にするオプションがあります。

この回答で述べられているように、ページコードからこの動作をオーバーライドすることはできません。

これについて2つの質問があります。

  • これらの印刷規則に関するドキュメントや優れたリファレンスはありますか？例えば：
    • どのCSSルールが無効になっていますか？
    • Javascriptは、印刷する前にページ上で何かを実行できますか？
  • Javascriptを使用して印刷モードのブラウザを検出し、正常な劣化システムを作成する方法はありますか？
4

2 に答える 2

4

ブラウザがページを印刷する方法は少しブラックボックスです。明確な参照を見つけることができませんでした。

すべての主要なブラウザには、Webページを紙のページに「合わせる」ための印刷オプション（デフォルトで有効）、および背景画像と色を印刷するための印刷オプション（デフォルトでは無効）があります。ほとんどのユーザーは、これらのオプションが存在することを認識している場合でも、これらのデフォルトをそのままにします。ブラウザが印刷時に他のCSSルールを「無効にする」のを見たことがありません。

FirefoxとIEはonbeforeprintandonafterprintイベントをサポートしているため、JavaScriptで印刷が行われていることを検出できますが、これはクロスブラウザーソリューションではないことは明らかです。

印刷に必要なほとんどの調整は、CSSで処理できます（別の印刷スタイルシートまたは@media print { ... }メインスタイルシートのブロックとして）。

  • CSS-Discuss Wikiには、CSSを介して制御できる量に関する優れたページがあります。

  • 出発点として、HTML5ボイラープレートの印刷スタイルを確認することをお勧めします。

  • 印刷する必要のある背景画像がある場合は<img>、ページに要素を含め、で非表示にしてから、印刷CSSで（または）でdisplay: none表示できるようにすることができます。display: blockinline

印刷用にページを大幅に変更する必要がある場合は、JavaScriptで調整するのではなく、別の印刷専用バージョンのページを提供することをお勧めします。

于 2012-06-19T05:00:04.770 に答える
0

最初のポイントについてはわかりませんが、印刷モードでブラウザを検出するには、画面の場合と同じように実行できます。Modernizrを使用し、サポートされている機能のクラスを条件付きで追加してから、次のようなターゲットCSSルールを作成します。

body.whateverfeature .yourrule { }

または、テストするのがIEだけの場合は、h5bpのように使用します。

<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->

于 2012-05-18T12:13:15.463 に答える