Webmaster: Element im Druck nicht anzeigen (visibility: hidden)

Wer Webseiten ausdrucken möchte, braucht oft nicht alle Elemente. Mit Media-Queries lassen sich verschiedene Layouts und Designs für verschiedene Medien erstellen: Vom Desktop-Bildschirm über das Smartphone Display bis zum Drucker. Wenn jetzt verschiedene Elemente auf einem Gerät (zum Beispiel im Druck) nicht gezeigt werden sollen, helfen diese Media-Queries auch weiter: Für den Ausdruck “versteckt” man das Element einfach!

<style>
        @media print {
           .printerhidden {
              visibility: hidden;
           }
        }
</style>

Fügt man einem Element (zum Beispiel einem Bild oder einem DIV) die Klasse “printerhidden” hinzu, wird das Element zwar auf dem Bildschirm angezeigt, nicht aber im Druck. Das kann praktisch für große Farbflächen oder Bilder sein, die unnötig Tinte verbrauchen würden.

Mit dieser einfachen CSS Eigenschaft lässt sich das Layout der HTML Seite ganz einfach zwischen Bildschirm und Druck trennen, um es noch individueller an das Ausgabemedium anzupassen.

Achtung: Nutzt man die Druckfunktion des Browser, etwa unter macOS, um ein PDF der Seite zu erstellen, verhält sich dies dann wie ein Drucker: Elemente, die mit Media-Queries für den Druck unsichtbar gemacht wurden, werden dann auch im PDF nicht gezeigt.