Kann CSS @media print zum Drucken benutzerdefinierter Elemente verwendet werden?

Benutzerdefinierte Elemente mit CSS drucken

Wenn Sie vor der Notwendigkeit stehen, eine druckerfreundliche Version einer inhaltsreichen Seite zu erstellen, bietet CSS die Möglichkeit ein leistungsstarker Mechanismus durch die @media-Druckregel. Die bereitgestellte Lösung wirft jedoch Fragen zur Machbarkeit und Browserkompatibilität auf.

Browserunterstützung für @media print

Die @media print-Regel wird von allen wichtigen modernen Browsern unterstützt , einschließlich Chrome, Firefox, Safari und Edge. Dadurch wird sichergestellt, dass die Druckstile konsistent auf verschiedenen Plattformen angewendet werden können.

Elemente mit CSS ausblenden und anzeigen

Um Elemente während des Druckens selektiv anzuzeigen, können Sie CSS verwenden alles ausblenden, außer denen, die mit einer bestimmten Klasse gekennzeichnet sind. Dies wird durch das folgende CSS-Snippet erreicht:

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

Bei diesem Ansatz werden alle Elemente mit der Klasse „printable“ und ihre untergeordneten Elemente beim Drucken sichtbar, während alles andere ausgeblendet wird.

Negativselektor und Browserkompatibilität

Die Verwendung des „Nicht“-Selektors zum Ausschließen von Elementen erscheint zwar logisch, ist aber möglicherweise nicht der Fall funktionieren in bestimmten Browsern wie erwartet. Um dies zu beheben, kann ein ergänzender Ansatz verwendet werden:

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

Diese CSS-Regel verbirgt alle Elemente im Körper, mit Ausnahme der Nachkommen von Elementen mit der Klasse „druckbar“.

Elemente im Browser und Drucker anzeigen

Um bestimmte Elemente im Browser anzuzeigen, aber beim Drucken auszublenden, können Sie das folgende CSS verwenden Technik:

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

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

Dieser Ansatz ermöglicht die Einbindung von Elementen (z. B. Links oder Logos), die nur für den Browser bzw. die Druckausgabe relevant sind.

Das obige ist der detaillierte Inhalt vonKann CSS @media print zum Drucken benutzerdefinierter Elemente verwendet werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!