Wie kann CSS die Druckeffizienz verbessern, indem es das Druckverhalten steuert?

CSS für selektives Drucken

Das Drucken umfangreicher Webseiten kann umständlich sein und die Einbeziehung unnötiger Elemente erfordern. CSS bietet mit seiner Funktion „@media print“ eine Lösung. Wenn Sie verstehen, wie es funktioniert, können Sie Ihren Druckprozess optimieren.

Browser-Unterstützung

Die meisten modernen Browser unterstützen „@media print“. Es ist in gängigen Browsern wie Chrome, Firefox, Safari und Edge weit verbreitet. Diese Funktion hat sich zu einem zuverlässigen Standard zur Steuerung des Druckverhaltens entwickelt.

Anzeigen spezifischer Elemente

Um Elemente während des Druckens selektiv anzuzeigen, können Sie einen von zwei Ansätzen verwenden:

1. Whitelisting-Ansatz (Anzeige: blockieren):

   • Erstellen Sie eine CSS-Klasse (z. B. „druckbar“).
   • Wenden Sie „display: none“ auf alle Elemente innerhalb der Mediendruckabfrage an, außer denen mit der Klasse „printable“.
   • Dadurch wird sichergestellt, dass beim Drucken nur Elemente mit der Klasse „printable“ sichtbar bleiben.

2. Blacklisting-Ansatz (nicht):

   • Wenden Sie „display: none“ auf alle Elemente innerhalb der Mediendruckabfrage an.
   • Verwenden Sie den „not“-Selektor, um Elemente mit der Klasse „printable“ von der „display: none“-Regel auszuschließen.
   • Obwohl dieser Ansatz logisch erscheint, funktioniert er aufgrund von Einschränkungen möglicherweise nicht in allen Browsern in CSS-Unterstützung.

Beispielcode

Verwendung des Whitelisting-Ansatzes:

@media print {
    * {display:none;}
    .printable, .printable > * {display:block;}
}

Ausblenden von Elementen beim Durchsuchen

Um bestimmte Elemente beim Durchsuchen auszublenden, sie aber beim Drucken anzuzeigen, können Sie den folgenden Code verwenden:

@media print {
  .noPrint {
      display:none;
  }
}
@media screen {
   .onlyPrint {
       display: none;
   }
}

Dieser Code verbirgt Elemente mit dem „noPrint "-Klasse beim Durchsuchen und Anzeigen von Elementen mit der Klasse "onlyPrint" beim Drucken.

Das obige ist der detaillierte Inhalt vonWie kann CSS die Druckeffizienz verbessern, indem es das Druckverhalten steuert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!