Wie kann ich die Sichtbarkeit von Elementen beim Drucken mit CSS steuern?

Sichtbarkeit im Druck mit CSS steuern

Beim Drucken von Webseiten ist es oft wünschenswert, bestimmte Elemente auszublenden, die nicht notwendig sind oder auf der Seite ablenken gedruckte Seite. CSS bietet ein leistungsstarkes Tool namens „@media print“, mit dem Entwickler die Sichtbarkeit von Elementen speziell für den Druck steuern können.

Browserkompatibilität

Das „@media print Die Funktion wird von modernen Browsern, einschließlich Chrome, Firefox, Safari und Edge, weitgehend unterstützt. Dadurch wird sichergestellt, dass die Druckstile auf den meisten Benutzergeräten effektiv angewendet werden.

Tagging-Elemente zum Drucken

Um die gewünschte Sichtbarkeitssteuerung zu erreichen, weisen Sie eine eindeutige Klasse zu, z als „druckbar“ auf die Elemente, die beim Drucken angezeigt werden sollen.

Drucken anwenden Stile

Geben Sie im Abschnitt „@media print“ des CSS an, dass alle Elemente ausgeblendet werden sollen (z. B. „display:none;“), mit Ausnahme derjenigen mit der Klasse „printable“.

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

Behebung des Sichtbarkeitsproblems

Der bereitgestellte Code verbirgt zunächst alles. Um die „druckbaren“ Elemente sichtbar zu machen, verwenden Sie einen negativen Ansatz: Blenden Sie alle Elemente aus, die nicht Teil der „druckbaren“ Klasse sind.

@media print {
    body *:not(.printable *) {display:none;}
}

Beispielverwendung

Um bestimmte Situationen zu behandeln, in denen bestimmte Elemente nur im Browser oder nur auf der gedruckten Seite angezeigt werden sollen:

• Fügen Sie eine Klasse mit dem Namen „noPrint“ hinzu. auf Elemente, die nicht auf der gedruckten Seite erscheinen sollen.
• Fügen Sie eine Klasse mit dem Namen „onlyPrint“ zu Elementen hinzu, die nur auf der gedruckten Seite erscheinen sollen.

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

Indem Sie diese implementieren Mit diesen Techniken können Entwickler die Sichtbarkeit von Elementen basierend auf dem Druckmodus effektiv steuern, das Benutzererlebnis verbessern und sicherstellen, dass nur der gewünschte Inhalt gedruckt wird.

Das obige ist der detaillierte Inhalt vonWie kann ich die Sichtbarkeit von Elementen beim Drucken mit CSS steuern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!