← Alle Beiträge

Anleitungen

Schlechten Druck beheben: ein eigenes @media print-Stylesheet für jede Seite

16 Mai 2026 · von JustZix Team

Du drückst Strg+P bei einem langen Artikel und die Vorschau ist eine Katastrophe: Die Navigationsleiste frisst die erste Seite, die Seitenleiste überlappt den Text, eine Cookie-Leiste schwebt über Absatz drei, und ein satter dunkler Hintergrund ist dabei, deine Druckerpatrone zu leeren. Die Seite hat einfach nie ein Druck-Stylesheet geschrieben. Also schreib selbst eins — es lebt in einer JustZix-CSS-Regel und macht „Als PDF speichern" wieder nutzbar.

Warum die meisten Seiten schlecht drucken

Drucken ist der am meisten ignorierte Teil der Webentwicklung. Designer testen auf Bildschirmen; QA testet auf Bildschirmen; niemand öffnet die Druckvorschau. Das Ergebnis ist, dass ein riesiger Anteil des Webs entweder gar keinen @media print-Block hat oder einen vor Jahren geschriebenen, der nicht mehr zum Layout passt. Der Browser druckt dann das Bildschirm-Layout, wie es ist — fixe Header, mehrspaltige Grids, dunkle Themes und alles.

Der Fix ist eine CSS-Regel, die nur greift, wenn die Seite gedruckt wird. Alles in @media print { ... } ist auf dem Bildschirm unsichtbar und tritt nur für Papier und PDF-Export in Kraft. Das heißt, du kannst aggressiv sein: ganze Bereiche verstecken, alles umfärben, einspaltig erzwingen — nichts davon berührt das normale Surfen.

Schritt 1 — alles verstecken, was kein Inhalt ist

Navigation, Seitenleisten, Footer, Teilen-Widgets, Cookie-Leisten, klebrige „Abonnieren"-Boxen: nichts davon gehört aufs Papier. Fang damit an, die offensichtliche Verkleidung zu verstecken.

@media print {
  header, nav, aside, footer,
  .sidebar, .site-header, .site-footer,
  .cookie-banner, .newsletter, .share-bar,
  .ad, [class*="advert" i], [id*="cookie" i],
  [role="banner"], [role="navigation"],
  [aria-label*="cookie" i] {
    display: none !important;
  }
}

Druckt die Seite immer noch Müll, öffne die Druckvorschau, finde den störenden Block in den DevTools und füge seinen Selektor zur Liste hinzu. Das musst du nur einmal pro Seite tun — die Regel ist gespeichert.

Schritt 2 — abgeschnittenen Inhalt ausklappen

Viele Seiten klemmen Text auf ein paar Zeilen, verstecken Überlauf oder setzen den Artikel in eine scrollende Box fester Höhe. Auf dem Bildschirm ist das in Ordnung; auf Papier schneidet es deinen Inhalt ab. Mach das Klemmen rückgängig.

@media print {
  /* Kill height limits and scroll boxes */
  main, article, .content, .post-body {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Undo line-clamp truncation */
  * {
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
  }

  /* Force the article full width, drop the grid */
  body, main, article {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
  }
}

Das pauschale overflow: visible auf * sieht grob aus, aber innerhalb von @media print ist es genau das, was du willst — auf einem Ausdruck sollte nichts abgeschnitten werden.

Schritt 3 — Seitenumbrüche steuern

Die mit Abstand größte Verbesserung eines Ausdrucks ist, Dinge davon abzuhalten, mitten im Element über Seiten umzubrechen. Ein über zwei Blätter gespaltener Codeblock, eine am Seitenende gestrandete Überschrift, eine halb zerrissene Tabellenzeile — alles mit den Fragmentierungs-Eigenschaften behebbar.

@media print {
  /* Never split these across a page */
  pre, blockquote, table, figure, img,
  li, .card {
    break-inside: avoid;
  }

  /* Keep a heading with the text that follows it */
  h1, h2, h3, h4 {
    break-after: avoid;
  }

  /* Start each top-level section on a fresh page */
  .chapter, section.page {
    break-before: page;
  }
}

Die modernen Eigenschaften sind break-inside, break-before und break-after. Die alten page-break-*-Namen funktionieren weiterhin und Chrome bildet sie automatisch ab, aber schreib für neue Regeln die neuen.

Schritt 4 — Link-URLs nach Ankern anzeigen

Ein gedruckter Link ist nutzlos — der Leser kann „hier klicken" nicht klicken. Druck die tatsächliche URL daneben mit einem Trick aus generiertem Inhalt.

@media print {
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
    word-break: break-all;
  }

  /* Don't print URLs for in-page anchors or javascript: links */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }
}

Das zieht das href-Attribut in sichtbaren Text. Lass es bei Anker-Links und Bild-Links weg, wenn es zu unruhig wird — ein Ausdruck voller langer Tracking-URLs ist sein eigenes Durcheinander.

Schritt 5 — Ränder mit @page setzen

Die @page-Regel steuert das gedruckte Blatt selbst: seine Ränder und Größe. Browser lassen dich Ränder auch im Druckdialog setzen, aber sie in die Regel einzubacken bedeutet, dass jeder Druck dieser Seite konsistent ist.

@media print {
  @page {
    margin: 18mm 16mm;
    size: A4;
  }

  /* Tighter margin on the first page if you have a title block */
  @page :first {
    margin-top: 12mm;
  }
}

Schritt 6 — einen hellen Hintergrund erzwingen, um Tinte zu sparen

Seiten mit dunklem Theme drucken als Tonerwand. Standardmäßig entfernt Chrome beim Drucken Hintergrundfarben (sofern „Hintergrundgrafiken" nicht angehakt ist), aber Text bleibt oft hellgrau, in der Annahme eines dunklen Hintergrunds. Erzwing ein sauberes Schwarz-auf-Weiß.

@media print {
  html, body, * {
    background: #fff !important;
    background-image: none !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Keep images and real photos intact */
  img, svg, video { filter: none !important; }

  /* Slightly soften secondary text so it still reads as secondary */
  .muted, .meta, time, small { color: #444 !important; }
}

Das garantiert lesbare, tintensparende Ausgabe unabhängig vom Theme der Seite — und es passt gut dazu, „Hintergrundgrafiken" im Druckdialog auszuschalten.

In JustZix zusammensetzen

1. Erstelle eine Regel, abgegrenzt auf die Seite, von der du oft druckst — zum Beispiel https://docs.example.com/*.
2. Füge alle sechs Blöcke in den CSS-Bereich ein, umhüllt von einem @media print (oder halte sie als getrennte Blöcke — beides funktioniert).
3. Öffne die Seite, drücke Strg+P und beobachte die Vorschau. Iteriere: Alles, was noch falsch ist, bekommt einen Selektor dazu.
4. Synchronisiere deinen Schlüssel, damit dasselbe saubere Druck-Setup dir auf jedes Gerät folgt.

Weil das Ganze in @media print sitzt, kannst du die Regel dauerhaft aktiv lassen. Sie ruht beim normalen Surfen und wacht nur auf, wenn du druckst oder ein PDF exportierst.

Stolperfallen, die zu kennen sich lohnt

• Umschalter für Hintergrundgrafiken — Chromes Druckdialog hat eine Checkbox „Hintergrundgrafiken", die einige deiner Farbentscheidungen überschreibt. Deine !important-Regeln gewinnen für den Vordergrund weiterhin, aber teste beide Zustände.
• Fixe/klebrige Elemente wiederholen sich in manchen Browsern auf jeder gedruckten Seite. Taucht ein Header immer wieder auf, setz position: static !important auf ihn innerhalb des Druck-Blocks.
• Generierte URLs können schlecht umbrechen — deshalb fügen wir word-break: break-all hinzu; ohne das schiebt eine lange URL das Layout seitwärts.
• Versteck nicht zu viel — Bildunterschriften, Bildnachweise und Autorenzeilen sind Inhalt, keine Verkleidung. Sei mit deiner Versteck-Liste genau.

Siehe auch

• Ein Responsive-Debugging-Overlay — finde Layout-Probleme, bevor sie auf den Ausdruck kommen.
• Eine Seite als sauberes Markdown kopieren — ein anderer Weg, Inhalt von einer unübersichtlichen Seite zu holen.

Ein gutes Druck-Stylesheet ist eine einmalige Fünfzehn-Minuten-Aufgabe, die sich jedes Mal auszahlt, wenn du ein PDF speicherst. Installiere JustZix, grenze eine Regel auf deine meistgedruckte Seite ab und kämpf nie wieder mit der Druckvorschau.