2018年の印刷スタイルシートの状態に関するガイド

公開: 2022-03-10
簡単な要約↬過去にSmashingMagazineで印刷スタイルシートについて説明しました。 この記事では、レイチェル・アンドリューが今日のブラウザからの印刷の状態を見ていきます。

今日は、過去にSmashing Magazineですでに取り上げられていた、印刷スタイルシートのトピックに戻りたいと思います。 この場合、私はブラウザから直接ページを印刷することについて話しています。 これは、膨大な画像（さらには広告）が印刷されることへの不満につながる可能性のある体験です。 ただし、場合によっては、最小限のインクと紙を使用して、適切に最適化されたページがプリンターから出力され、すべてが読みやすいようになると、少し喜びが増します。

この記事では、その2番目のエクスペリエンスを最適に作成する方法について説明します。 Webページに印刷スタイルを含める方法と、印刷後に実際に使用される仕様を確認します。 ブラウザのサポートの状態と、印刷スタイルを最適にテストする方法について説明します。 次に、印刷スタイルシートが印刷のニーズに十分でない場合にどうするかについて、いくつかの指針を示します。

印刷サポートの重要な場所

それでもサイトに印刷スタイルを実装していない場合は、しっかりとした印刷エクスペリエンスがユーザーに役立つ重要な場所がいくつかあります。 たとえば、多くのユーザーは、電子メールで詳細を送信する場合でも、購入または予約後に取引確認ページを印刷したいと思うでしょう。

訪問者がコンピューターから離れているときに使用する可能性のある情報も、印刷スタイルシートの候補として適しています。 私が印刷する最も一般的なものはレシピです。 iPadにロードすることもできますが、調理中にレシピを印刷して冷蔵庫のドアにポップする方が便利な場合がよくあります。 他のそのような例は、道順や旅行情報かもしれません。 海外に旅行し、常にデータにアクセスできるとは限らない場合、これらのプリントアウトは非常に貴重です。

ジャンプした後もっと！ 以下を読み続けてください↓

あらゆる種類の参考資料も印刷されることがよくあります。 多くの人にとって、紙のコピーにメモをとることができることは彼らが最もよく学ぶ方法です。 繰り返しになりますが、これは情報がオフライン形式でアクセスできることを意味します。 なぜ人々がWebページを印刷したいのか疑問に思うのは簡単ですが、私たちの仕事は多くの場合、訪問者にとって最適な形式でコンテンツにアクセスできるようにすることです。 その最良のフォーマットが紙に印刷されている場合、誰が議論するのでしょうか？

このページが印刷されるのはなぜですか？

印刷スタイルシートに含めるか非表示にするコンテンツを決定する際に尋ねる良い質問は、「ユーザーがこのページを印刷するのはなぜですか？」です。 ええと、キッチンで料理をしているときに従いたいレシピや、食材を買うために買い物をするときに一緒に持っていきたいレシピがあるかもしれません。 または、予約の証明としてチケットを購入した後に確認ページを印刷したいと考えています。 または、領収書や請求書を紙または電子的にアカウントに保存するために印刷（またはPDFに印刷）したい場合もあります。

印刷されたドキュメントの使用を検討すると、ユーザーがその印刷物を参照するときに最も役立つコンテンツの印刷バージョンを作成するのに役立ちます。

ワークフロー

CSSに印刷スタイルを含めることを決定したら、それらをワークフローに追加して、レイアウトを変更するときに、それらの変更も印刷バージョンに含めるようにする必要があります。

ページへの印刷スタイルの追加

「スタイルシートの印刷」を有効にするために私たちが行っているのは、ドキュメントが印刷されるときにこれらのCSSルールが何であるかをブラウザに伝えることです。 これを行う1つの方法は、 <link>要素を使用して追加のスタイルシートをリンクすることです。

 <link rel="stylesheet" media="print" href="print.css">

この方法では、印刷スタイルを、よりきれいであると見なされる可能性のある他のすべてのものから分離しておくことができますが、欠点があります。

リンクされたスタイルシートは、サーバーへの追加のリクエストを作成します。 さらに、印刷スタイルを他のスタイルからうまく分離することには、欠点があります。 公開する前に個別のスタイルを更新するように注意することもできますが、スタイルシートは、サイトに機能が追加されても印刷スタイルに反映されないため、見えなくなって頭に浮かぶために問題が発生する可能性があります。

印刷スタイルを含める別の方法は、レスポンシブデザインの特定のブレークポイントにCSSを含めるのと同じ方法で@mediaを使用することです。 このメソッドは、機能のためにすべてのCSSをまとめます。 狭いブレークポイントから広いブレークポイントのスタイル、および印刷のスタイル。 @supportsを使用した機能クエリに加えて、これにより、設計機能のすべてのCSSが一緒に保持および維持されることを保証する開発方法が促進されます。

 @media print { }

画面のCSSを上書きするか、個別のルールを作成する

多くの場合、画面表示に使用するCSSは、いくつかの小さな調整を加えるだけで印刷に使用できます。 したがって、その基本的なCSSを変更するために、印刷用のCSSを作成するだけで済みます。 フォントサイズまたはファミリを上書きしても、CSSの他の要素はそのままにしておくことができます。

印刷用に完全に別個のスタイルを使用し、白紙の状態から始めたい場合は、screenキーワードを使用して、残りのサイトスタイルをメディアクエリでラップする必要があります。

 @media screen { }

その点で、レスポンシブデザインにメディアクエリを使用している場合は、画面用にメディアクエリを記述している可能性があります。

 @media screen and (min-width: 500px) { }

印刷時にこれらのスタイルを使用する場合は、 screenキーワードを削除する必要があります。 ただし、実際には、「モバイルファースト」で作業する場合、単一列のモバイルレイアウトが印刷レイアウトの開始点として非常に適していることがよくあります。 画面のみのより複雑なレイアウトを取り込むメディアクエリを使用することで、印刷用に行うスタイルの上書きがはるかに少なくなります。

印刷スタイルをパターンライブラリとスタイルガイドに追加する

印刷スタイルがサイトデザインの不可欠な部分として表示されるようにするには、それらをサイトのスタイルガイドまたはパターンライブラリ（ある場合）に追加します。 そうすれば、印刷スタイルが存在し、作成された新しいパターンには同等の印刷バージョンが必要であるというリマインダーが常にあります。 このようにして、デザインシステムの第一級市民として印刷スタイルの可視性を提供します。

印刷用CSSの基本

印刷用のCSSを作成する場合、自分で行う可能性が高い3つのことがあります。 印刷時に関係のないコンテンツは表示せず、非表示にする必要があります。 印刷版をより便利にするために、コンテンツを追加することもできます。 また、印刷用に最適化するために、ページのフォントやその他の要素を調整することもできます。 これらのテクニックを見てみましょう。

コンテンツを非表示にする

CSSでは、コンテンツを非表示にし、ボックスの生成を防ぐ方法は、値がnoneのdisplayプロパティを使用することです。

 .box { display: none; }

display: noneは、要素とそのすべての子要素を折りたたみます。 したがって、画像ギャラリーをリストとしてマークアップしている場合、印刷時にこれを非表示にするために必要なのは、表示を設定することだけですulにはdisplay: noneを設定します。

非表示にしたいのは、印刷時に不要な画像、ナビゲーション、広告パネル、および関連コンテンツへのリンクを表示するページの領域などです。 ユーザーがページを印刷する理由を振り返ると、何を削除するかを決めるのに役立ちます。

コンテンツの挿入

ページの印刷時に表示するのが理にかなっているコンテンツがあるかもしれません。 display: none設定せず、印刷スタイルシートに表示します。 ただし、CSSを使用して、通常は画面に出力されないコンテンツを公開することもできます。 この良い例は、ドキュメント内のリンクのURLです。 画面ドキュメントでは、通常、リンクにはリンクテキストが表示され、クリックしてその新しいページまたは外部Webサイトにアクセスできます。 ただし、印刷されたリンクをたどることができない場合は、後でリンクにアクセスしたい場合に備えて、読者がURLを確認できると便利です。

これは、CSS生成コンテンツを使用して実現します。 生成されたコンテンツは、CSSを介してドキュメントにコンテンツを挿入する方法を提供します。 印刷するとき、これは非常に便利になります。

簡単なテキスト文字列をドキュメントに挿入できます。 次の例では、 wrapperのクラスを使用して要素をターゲットにし、その前に文字列「この情報の最新バージョンについてはwww.mysite.comを参照してください」を挿入します。

 .wrapper::after { content: "Please see www.mysite.com for the latest version of this information."; }

ドキュメントにすでに存在するものを挿入できますが、例としてリンクhrefのコンテンツがあります。 hrefの属性を持つa各インスタンスの後に生成コンテンツを追加し、挿入するコンテンツはhref属性の値です-これがリンクになります。

 a[href]:after { content: " (" attr(href) ")"; }

必要に応じて、新しいCSS :notセレクターを使用して内部リンクを除外できます。

 a[href^="http"]:not([href*="example.com"]):after { content: " (" attr(href) ")"; }

ManuelMatuzovicによって書かれた記事「ITotallyForgot About Print Stylesheets」には、このような他の便利なヒントがいくつかあります。

高度な印刷スタイリング

印刷版が1ページにうまく収まる場合は、前のセクションの手法を使用するだけで、比較的簡単に印刷スタイルシートを作成できるはずです。 ただし、複数のページに印刷するものがあると（特に、表や図などの要素が含まれている場合）、アイテムが最適ではない方法で新しいページに分割されることがあります。 余白のサイズを変更するなど、ページ自体に関する操作を制御することもできます。

CSSにはこれらのことを行う方法がありますが、これから説明するように、ブラウザーのサポートにはパッチがあります。

ページングされたメディア

CSS Paged Media Specificationが開き、その役割について次の説明が表示されます。

「このCSSモジュールは、ページ化されたプレゼンテーションで断片化されたコンテンツを保持するためにページが生成およびレイアウトされる方法を指定します。 ページの余白、ページのサイズと向き、ヘッダーとフッターを制御する機能を追加し、生成されたコンテンツを拡張して、ページの番号付けとヘッダー/フッターの実行を可能にします。」

画面は連続メディアです; さらにコンテンツがある場合は、スクロールして表示します。 個々のページに分割されるという概念はありません。 印刷するとすぐに、仕様ではページメディアとして記述されている固定サイズのページに出力します。 Paged Media仕様は、コンテンツがページ間でどのように断片化されるかを扱っていません。これについては後で説明します。 代わりに、ページ自体の機能を調べます。

個々のページをターゲットにする方法が必要です。これは、 @pageルールを使用して行います。 これは通常のセレクターと同じように使用され、 @pageをターゲットにして、ページで使用されるCSSを記述します。 簡単な例は、ドキュメントを印刷するときに作成されるすべてのページの余白を変更することです。

 @page { margin: 20px; }

:leftおよび:right rightspread疑似クラスセレクターを使用して特定のページをターゲットにすることができます。 最初のページは:first疑似クラスセレクターでターゲットにでき、ページ分割によって発生した空白ページは:blankで選択できます。 たとえば、最初のページにのみ上マージンを設定するには、次のようにします。

 @page :first { margin-top: 250pt; }

左側のページの右側と右側のページの左側に大きなマージンを設定するには、次の手順に従います。

 @page :left { margin-right: 200pt; } @page :right { margin-left: 200pt; }

仕様では、作成された余白にコンテンツを挿入できるように定義されていますが、この機能をサポートしているブラウザはないようです。 これについては、印刷固有のユーザーエージェントで使用するスタイルシートの作成に関する記事「CSSを使用した印刷用のデザイン」で説明しています。

CSSフラグメンテーション

Paged Mediaモジュールがページボックス自体を処理する場合、CSS Fragmentation Moduleは、フラグメント化ツール間でコンテンツがどのように分割されるかを詳しく説明します。 フラグメントエイナー（またはフラグメントコンテナー）は、フラグメント化されたフローの一部を含むコンテナーです。 これは、オーバーフローするポイントに到達すると、新しいコンテナに分割されるフローです。

現在、断片化が発生するコンテキストはページングされたメディアにあるため、印刷時、および複数列レイアウトを使用している場合や、コンテンツが列ボックス間で途切れます。 Fragmentation仕様では、これらのコンテキストでコンテンツが新しいフラグメントに分割される方法を制御できるCSSプロパティを分割するためのさまざまなルールが定義されています。 また、CSS Regions仕様でコンテンツがどのように壊れるかを定義しますが、これは現時点ではクロスブラウザーとして使用できるものではありません。

そして、ブラウザについて言えば、断片化は現時点でのサポートの点で少し混乱しています。 MDNの各プロパティのブラウザ互換性テーブルは、サポートに関して正確であるように見えますが、これらのプロパティの使用を注意深くテストする必要があります。

CSS2の古いプロパティ

CSS Fragmentation Level3のbreak-*プロパティに加えて、CSS2 page-break-*プロパティがあります。 仕様的には、これらはより一般的であり、ブレークが発生するさまざまなコンテキストで使用できるため、新しいbreak-*プロパティに置き換えられました。 ページと複数列の区切りの間に大きな違いはありません。 ただし、ブラウザのサポートに関しては、古いプロパティのブラウザサポートが優れています。 これは、ブレーキングを制御するために、現時点でそれらを使用する必要があるかもしれないことを意味します。 新しいプロパティを実装するブラウザは、古いプロパティを削除するのではなく、エイリアスを作成します。

次の例では、新しいプロパティとそれが存在する古いプロパティの両方を示します。

break-before ＆ break-after

これらのプロパティはボックス間の区切りを処理し、次の値を受け入れます。初期値はautoです。 最後の4つの値は、ページングされたメディアには適用されず、代わりにマルチ列とリージョンに適用されます。

  • auto
  • avoid
  • avoid-page
  • page
  • left
  • right
  • recto
  • verso
  • avoid-column
  • column
  • avoid-region
  • region

page-break-beforeおよびpage-break-afterの古いプロパティは、より狭い範囲の値を受け入れます。

  • auto
  • always
  • avoid
  • left
  • right
  • inherit

h2要素の前に常にページ分割を発生させるには、次を使用します。

 h2 { break-before: page; }

段落が直前の見出しから切り離されないようにするには、次のようにします。

 h2, h3 { break-after: avoid-page; }

古いpage-break-*プロパティは、常にh2の前にページ分割を引き起こします：

 h2 { page-break-before: always; }

段落が直前の見出しから切り離されないようにするには、次のようにします。

 h2, h3{ page-break-after: avoid; }

MDNで、プロパティの情報と使用例を見つけます。

  • 休憩前
  • 休憩後
  • ページ分割前
  • ページ分割後

break-inside

このプロパティは、ボックス内のブレークを制御し、値を受け入れます。

  • auto
  • avoid
  • avoid-page
  • avoid-column
  • avoid-region

前の2つのプロパティと同様に、CSS2からエイリアスされたpage-break-insideがあり、値を受け入れます。

  • auto
  • avoid
  • inherit

たとえば、 figureやtableがあり、その半分を1つのページに、残りの半分を別のページに配置したくない場合があります。

 figure { break-inside: avoid; }

そして、古いプロパティを使用する場合：

 figure { page-break-inside: avoid; }

MDNの場合：

  • 侵入
  • ページ分割-内側

孤児と未亡人

Fragmentation仕様では、孤立したorphansとwidowsのプロパティも定義されています。 orphansプロパティは、段落などのコンテンツが2つのページ間で分割されている場合に、最初のページの下部に残すことができる行数を定義します。 widowsプロパティは、2ページ目の上部に残せる行数を定義します。

したがって、ページの最後に1行、次のページの上部に1行になるのを防ぐために、次を使用できます。

 p { orphans: 2; widows: 2; }

widowsとorphansのプロパティは十分にサポートされています（欠落しているブラウザの実装はFirefoxです）。

MDNの場合：

  • 未亡人
  • 孤児

box-decoration-break

Fragmentationモジュールで定義されている最後のプロパティはbox-decoration-breakです。 このプロパティは、境界線、余白、およびパディングがコンテンツを分割するかラップするかを処理します。 受け入れる値は次のとおりです。

  • slice
  • clone

たとえば、コンテンツ領域に10ピクセルの灰色の境界線があり、コンテンツを印刷する場合、これが印刷されるデフォルトの方法は、境界線が各ページに続くことですが、コンテンツの最後でのみ折り返されます。 したがって、次のページに進んで続行する前に、休憩を取ります。

境界線は各ページを折り返さないため、ページ間が途切れます
境界線は各ページを折り返さないため、ページ間が途切れます

box-decoration-break: cloneを使用すると、境界線とパディングおよびマージンが各ページで完了し、各ページに灰色の境界線が表示されます。

境界線は個々のページを折り返します
境界線は個々のページを折り返します

現在、これはFirefoxのPaged Mediaでのみ機能し、MDNのbox-decoration-breakについて詳しく知ることができます。

ブラウザのサポート

すでに述べたように、ブラウザのサポートはページドメディアとフラグメンテーションに対してパッチがあります。 フラグメンテーションが関係する場合、追加の問題は、各レイアウトメソッドに対してブレークを指定して実装する必要があることです。 印刷スタイルシートでFlexboxまたはCSSグリッドを使用したいと思っていた場合は、おそらくがっかりするでしょう。 FlexboxとGridのChromeのバグを確認できます。

私が今できる最善の提案は、印刷スタイルシートを適度にシンプルに保つことです。 古いpage-break-*プロパティと新しいプロパティの両方を含むフラグメンテーションプロパティを追加します。 ただし、これらがすべてのブラウザで機能するとは限らないことを受け入れてください。 また、ブラウザのサポートが不足していることに不満を感じている場合は、ブラウザでこれらの問題を提起するか、すでに提起されている問題に投票してください。 特に、断片化は、サポートされている場合でも、コマンドではなく提案として扱う必要があります。 いつどこで物事を壊したいかについて非常に具体的にすることは可能であり、ページをレイアウトすることはほとんど不可能です。 あなたは時々あなたが次善の破壊を得るかもしれないと仮定するべきです。

印刷スタイルシートのテスト

印刷スタイルシートのテストは退屈なものになる可能性があり、通常、印刷プレビューを使用するか、PDFに繰り返し印刷する必要があります。 ただし、ブラウザのDevToolsにより、これが少し簡単になりました。 ChromeとFirefoxの両方に、印刷スタイルのみを表示する方法があります。

Firefox

開発者ツールバーを開き、プロンプトで「 media emulate printと入力します。

タイピングメディアは印刷をエミュレートします
Firefoxでの印刷スタイルのエミュレート

クロム

DevToolsを開き、3つのドットのアイコンをクリックして、[その他のツール]と[レンダリング]を選択します。 次に、[CSSメディアのエミュレート]で[印刷]を選択できます。

ChromeDevToolsは印刷メディアをエミュレートします
Chromeでの印刷スタイルのエミュレート

これは、CSSレイアウト、非表示または生成されたコンテンツへの変更をテストする場合にのみ役立ちます。 断片化には役立ちません。そのためには、印刷するかPDFに印刷する必要があります。 ただし、プリンターへの往復を数回節約でき、サイトの新しい部分を開発するときに、まだ隠れていて正しいものを表示していることを確認するのに役立ちます。

印刷スタイルシートが十分でない場合の対処方法

理想的な世界では、ブラウザから直接印刷する場合、ブラウザはより多くのページドメディア仕様を実装し、断片化は一貫した方法でより完全に実装されます。 関係するブラウザを使用してブラウザから印刷するときに見つけたバグを提起することは確かに価値があります。 これらの修正を要求しない場合、修正の優先度は低くなります。

高レベルの印刷サポートが必要で、CSSを使用したい場合は、現在、Princeなどの印刷固有のユーザーエージェントを使用する必要があります。 Princeに出力するときに、CSSを使用して書籍をフォーマットする方法については、私の記事「CSSを使用した印刷用のデザイン」で詳しく説明しています。

Princeは、Web上でCSSを使用してきれいに印刷されたドキュメントを生成するために、サーバーにインストールすることもできますが、コストが高くなります。 別の方法は、Princeレンダリングエンジンの上にAPIを提供するDocRaptorのようなサーバーです。

wkhtmltopdfなどのオープンソースのHTMLおよびCSSからPDFへのジェネレーターがありますが、ほとんどの場合、ブラウザーレンダリングエンジンを使用して印刷出力を作成するため、ページメディアおよびフラグメンテーション仕様の実装に関してはブラウザーと同じ制限があります。 例外はWeasyPrintで、独自の実装があり、わずかに異なる機能をサポートしているようですが、Princeのようなフル機能ではありません。

印刷用のユーザーエージェントの詳細については、print-css.rocksサイトを参照してください。

その他のリソース

CSSからの印刷は、過去数年間でほとんど進んでいないという事実のために、SmashingMagazineや他の場所にある多くの古いリソースはまだ有効です。 いくつかの追加のヒントとコツは、次のリソースで見つけることができます。 便利な印刷ワークフローまたは技術的なヒントを見つけた場合は、それを以下のコメントに追加してください。

  • 「印刷スタイルシートを完全に忘れました」、UXCollectiveのManuelMatuzovic氏
  • 「印刷スタイルシートのアプローチ：ブラックリストとホワイトリスト」、Chris Coyier、CSS-Tricks
  • 「完璧な印刷スタイルシート」AndreasHecht、Noupe
  • 「印刷スタイルシートの設定方法」、Christian Krammer、Smashing Magazine
  • 「印刷スタイルシートの5つの強力なヒントとコツ」、Dudley Storey、Smashing Magazine