HTML Element bei Druck ausblenden

Um Elemente oder Bereiche für den Druck auszublenden, brauchen wir ein bisschen CSS. Dafür können wir das erstmal in den Head-Bereich packen, anstatt das für diese Anleitung in eine spezielle extra Datei zu schieben. Unser Grundgerüst sieht also erstmal so aus (ohne den CSS-Bereich im Head).

Logischerweise wollen wir das DIV mit dem Text "Lieber nicht drucken" verstecken, wenn man die Seite ausdrucken möchte.

 1<!DOCTYPE html>
 2<html lang="de">
 3  <head>
 4    <title>Titel</title>
 5  </head>
 6  <body>
 7    <div>
 8      Soll gedruckt werden
 9    </div>
10    <div>
11      Lieber nicht drucken
12    </div>    
13  </body>
14</html>

In dem Head-Bereich können wir nun den Style-Bereich für unser CSS einfügen und folgendes dort reinschreiben:

1@media print {
2  .no-print, .no-print * {
3    display: none !important;
4  }
5}

Mithilfe der Media-Queries (@print) sorgen wir dafür, dass das CSS nur beim Druck verarbeitet wird. Nun müssen wir nurnoch unserem DIV die entsprechende Klasse geben, so dass unsere HTML-Seite zum Schluss so aussieht:

 1<!DOCTYPE html>
 2<html lang="de">
 3  <head>
 4    <title>Titel</title>
 5    <style>
 6      @media print {
 7        .no-print, .no-print * {
 8          display: none !important;
 9        }
10      }
11    </style>
12  </head>
13  <body>
14    <div>
15      Soll gedruckt werden
16    </div>
17    <div class="no-print">
18      Lieber nicht drucken
19    </div>    
20  </body>
21</html>

In der Druckansicht, wird unser zweites DIV nun nichtmehr angezeigt.