ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。