web-dev-qa-db-ja.com

印刷スタイルシートの開発とテストのより高速な方法（毎回印刷プレビューを避ける）？

これが今の私のプロセスです：

  1. Print.cssへの変更を保存する
  2. ブラウザを開き、ページを更新します。
  3. 右クリックして、[印刷]> [印刷プレビュー]を選択します（Firefox、ただし実際には任意のブラウザー）

ステップ3がバグであり、プラグインなどを使用してプロセスから切り離すことができるかどうか疑問に思っています。ページを印刷メディアとして表示することを選択し、更新するだけで変更を確認できます。

印刷スタイルシートをどのようにテストしますか？更新後、常に印刷プレビューをクリックしますか？

cssfirefox
167
Michael

ChromeMedia Type Emulation を投稿で受け入れられるように使用できます ブラウザでprint cssを参照 。

2017年11月21日更新

更新されたDevToolsのドキュメントは次の場所にあります：印刷モードでページを表示。

ページを印刷モードで表示するには：
1。 コマンドメニュー を開きます。 （tl; dr Cmd+Shift+P （Mac）または Ctrl+Shift+P （Windows、Linux））
2。入力を開始 Rendering そしてShow Renderingを選択します。
3。 CSSメディアのエミュレートドロップダウンでは、printを選択します。

2016年2月29日更新

DevToolsのドキュメントは移動しました。上記のリンクは不正確な情報を提供します。メディアタイプエミュレーションに関する更新されたドキュメントは、ここで見つけることができます： 他のメディアタイプのプレビュースタイル 。

ブラウザのビューポートの右上隅にあるその他のオーバーライドアイコン•=•その他のオーバーライドアイコンをクリックして、DevToolsエミュレーションドロワーを開きます。次に、エミュレーションドロワーでMediaを選択します。

2016年4月12日更新

残念ながら、ドキュメントは印刷エミュレーションに関して更新されていないようです。ただし、Print Media Emulatorは（再び）移動しました：

  1. Chrome DevToolsを開きます
  2. ヒット esc キーボードで
  3. クリック⋮（垂直省略記号）
  4. Renderingを選択します
  5. ティック印刷メディアのエミュレート

以下のスクリーンショットをご覧ください。

rendering settings 12/04/2016

2016年6月28日更新

Chrome DevToolsおよび「メディアのエミュレート」オプションに関するGoogle Developers DocsがChrome> 51用に更新されました：

https://developers.google.com/web/tools/chrome-devtools/settings?hl=en#emulate-print-media

ページを印刷プレビューモードで表示するには、DevToolsのメインメニューを開き、その他のツール>レンダリング設定、次にemulate mediaチェックボックスを有効にし、ドロップダウンメニューをprint。

rendering settings 28/06/2016

2016年5月24日更新

設定の名前が再び変更されました。

ページを印刷プレビューモードで表示するには、DevToolsメインメニューを開き、その他のツール>レンダリング、次にCSSメディアのエミュレートチェックボックスを有効にし、ドロップダウンメニューをprint。

emulate CSS media

198
Patrik Affentranger

Firefoxでは、Shift+F2と入力して開発者ツールバーのコマンドラインを開き、media emulate printと入力できます。

この方法で他のメディアタイプをエミュレートすることもできます。

165
Szymon Świtała

Firefox + Web Developer toolbar 拡張機能には、さまざまなスタイルシートを有効/無効にする方法があります。

CSSメニューの下を見てください。個々のスタイルシートを無効または有効にするメニューと、「メディアタイプごとに表示」メニューもあります。

また、FirefoxでPrintPreviewにアクセスするための手順を減らすには、ツールバーボタンを作成する PrintPreview extension を試してください。

Chromeの場合、 その拡張機能のポート があります。 Chromeバージョンでわかることから、「印刷スタイルを表示」を選択できます

21
slolife

印刷プレビューを含まないテスト方法は使用しません。違いが多すぎます。背景画像は印刷ではまったく機能しませんが、通常のスクリーンコンテキストでは主に表示されます。

Chromeでは、control+pはすぐに印刷プレビューに進みます。 （メニューバーにマウスを移動することは忘れてください）。とても簡単です。

12
Faust

テスト中にスクリーンスタイルを無効にし、印刷スタイルシートのメディアタイプを「スクリーン」に変更するだけです。これは、実際の印刷プレビュー（改ページ、ドキュメントの幅など）を使用する場合とまったく同じではありませんが、それでもかなり良いアイデアを提供します。

6
Leo

simple for me（@screenパーツなどを持たない1）with FF：

  • cSSコンテンツの最後に@media print { ...部分を追加します
  • out-commentラッパー宣言のみ/*@media print {*/ ... /*}*/
    • したがって、印刷物をスタイルに適用し、該当する場合はすぐにそれらをオーバーライドします
  • （私はLiveReloadを使用していますので、私のブラウザページは保存後すぐに更新されます変更）
  • （それ以外の場合、LiveReloadを使用しない場合:)CTRL+Rを押すページをリロードする
  • 今、あなたはすでに多くの典型的な印刷CSS調整（フォントスタイル、フォントサイズ、間隔、色）を行うことができます印刷プレビューはまだ必要ありません
  • ALT+F+Vを押して印刷プレビューを開き、ALT+Wを押してもう一度閉じます

1：それらがある場合、テストされたメディアに応じて、それらをアウト/インコメントすることは、大したことではないかもしれません

5
Andreas Dietrich

この他の投稿で説明されているように（ Chromeの要素インスペクターを印刷プレビューモードで使用しますか？ ）、chromeを使用して印刷スタイルシートを簡単にエミュレートできます。これは、印刷ダイアログが表示されたときに推測するのではなく、インスペクターを使用してスタイルがどこから来ているのかを見ることができるので素晴らしいです。

Chromeの要素インスペクターの右下にある歯車アイコンをクリックして、[設定の上書き]ダイアログにアクセスします。次に、ターゲットメディアタイプとして印刷を選択します。

驚くばかり！

3
Charity

少なくともChromeの場合：開発中に、bodyタグonload="window.print()"に追加します。これにより、更新後すぐに印刷モードが開きます。

残念ながら、本質的に埋め込みPDFであるため、開発者ツールはあまり使用されていないようです。

ちなみに、ステップ2を削除する方法があります。人気のあるものの1つはLiveReloadです。

2
nafg

通常のスタイルシートを一時的に削除し、通常のリンクタグが設定されたスタイルシートのみをロードしてみてください。

0
Andrew

Chrome 62では、cmd-R/cmd-PがMacでうまく機能し、@ media印刷スタイルのページのニースプレビューが表示されます。

これは、ブラウザウィンドウ（開発者ツールではない）の右上にある垂直の省略記号からアクセスできます。

Escを使用して、プレビューウィンドウをキャンセルします。

したがって、IntelliJ IDEAとChromeを使用したワークフローでは、cmd-s、cmd-tab、cmd-r、cmd-p、esc、cmd-tabで、IDEに戻りました。

Windows 10のChrome 62には、同じ場所に同じ[印刷...]メニューがあり、ctrl-pでアクセスできます。 print in Chrome 62

0
Mojo Techno