CSS @media print を使用してカスタム要素を印刷できますか?

CSS を使用したカスタム要素の印刷

コンテンツが豊富なページの印刷用バージョンを作成する必要がある場合、CSS は以下の機能を提供します@media 印刷ルールによる強力なメカニズム。ただし、提供されているソリューションでは、その実現可能性とブラウザの互換性について疑問が生じています。

@media print のブラウザ サポート

@media print ルールは、すべての主要な最新ブラウザでサポートされています。 、Chrome、Firefox、Safari、Edge を含みます。これにより、印刷スタイルをさまざまなプラットフォームに一貫して適用できるようになります。

CSS を使用した要素の非表示と表示

印刷中に要素を選択的に表示するには、CSS を利用して特定のクラスでマークされたものを除くすべてを非表示にします。次の CSS スニペットはこれを実現します。

このアプローチでは、「printable」クラスを持つすべての要素とその子要素が印刷中に表示され、他のすべては非表示になります。

ネガティブ セレクターとブラウザの互換性

「not」セレクターを使用して要素を除外することは論理的であるように見えますが、特定のブラウザでは期待どおりに動作しない場合があります。これに対処するために、補完的なアプローチを採用できます。

この CSS ルールは、「printable」クラスの要素の子孫を除き、本文内のすべての要素を非表示にします。

ブラウザとプリンタでの要素の表示

ブラウザでは特定の要素を表示し、印刷時には非表示にするには、次の CSS テクニックを使用できます。

このアプローチでは、次のことが可能になります。それぞれブラウザまたは印刷出力にのみ関連する要素 (リンクやロゴなど) を含めること。

以上がCSS @media print を使用してカスタム要素を印刷できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。