jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS-Tools

Kostenlose CSS-Druckstil-Generator

Generiere ein Druck-Stylesheet zum Ausblenden von Navigation, Anzeigen von Link-URLs und Vermeiden von Seitenumbruchen.

Tool wird geladen...

Was ist CSS-Druckstil-Generator?

Ein Print-Stylesheet ist CSS innerhalb von @media print, das die Seite formatiert, wenn jemand druckt oder als PDF speichert. Es sollte Navigation, Sidebars und Fußzeilen ausblenden, vollständige URLs nach Links anzeigen, Seitenumbrüche in wichtigen Blöcken verhindern und sinnvolle Ränder setzen.

Kurze Antwort

Generieren Sie einen @media print-Block, der Navigation ausblendet, Link-URLs anzeigt, Seitenumbrüche steuert und sinnvolle Druckränder setzt. Essentiell für sauberen Druck von Artikeln, Rezepten, Dokumentationen und Rechnungen.

Last updated: 2026-06-11

Einschränkungen

  • Seitenumbruch-Regeln sind Hinweise an die Browser-Druck-Engine, keine Garantien.
  • Browser-Druck-Engines rendern CSS unterschiedlich. Chrome, Firefox und Safari produzieren leicht unterschiedliche Druckausgaben.
  • Druckstil-Regeln gelten nur, wenn die Seite gedruckt oder in der Druckvorschau betrachtet wird.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

  1. Wählen Sie die Elemente aus, die beim Drucken ausgeblendet werden sollen.
  2. Wählen Sie, ob URLs nach Links angezeigt werden sollen.
  3. Legen Sie Rand- und Seitengrößen-Präferenzen fest.
  4. Kopieren Sie den @media print-Block in Ihr Stylesheet und testen Sie mit der Druckvorschau.

Wofür du es nutzen kannst

  • Bereiten Sie eine Rezeptseite für sauberen Druck ohne Navigation und Werbung vor.
  • Machen Sie Dokumentationsseiten druckbar mit vollständigen Link-URLs.
  • Gestalten Sie Rechnungen und Checklisten für professionellen Druck.

Anwendungsfalle

Praxisbeispiele

Beispiel

Rezeptkarten-Druckstile

Ein Rezeptblog fügt Druckstile hinzu, damit Leser eine saubere Rezeptkarte ohne Header, Sidebar und Kommentare drucken können.

Beispiel

Dokumentation mit erweiterten URLs

Eine Dokumentationsseite druckt mit erweiterten Link-URLs, damit Leser Referenzen auf Papier nachverfolgen können.

Haufige Fehler

  • Alle Bilder statt nur dekorativer auszublenden.
  • display:none auf alles anzuwenden, ohne die Druckausgabe zu testen.
  • page-break-inside: avoid nicht auf Tabellen und Code-Blöcke zu setzen.

Überprüfung

  1. Verwenden Sie die Druckvorschau in Chrome, Firefox und Safari, um das Druckbild ohne Navigation, mit erweiterten URLs und passenden Seitenumbrüchen zu prüfen.
  2. Speichern Sie die Seite als PDF aus jedem Browser und vergleichen Sie die Ausgabe.

FAQ

Fragen zu CSS-Druckstil-Generator

Wie teste ich Druckstile?

Verwenden Sie die Browser-Druckvorschau (Strg+P) oder das DevTools Rendering-Panel zur Emulation des Druckmediums.

Sollten Druckstile in einer separaten Datei sein?

Sie können eine separate print.css verwenden oder @media print in Ihr Haupt-Stylesheet einbetten. Beide Ansätze funktionieren.

Welche Elemente sollte ich in Druckstilen ausblenden?

Blenden Sie Navigationsleisten, Sidebar-Menüs, Footer-Widgets, Kommentarbereiche, Share-Buttons und Newsletter-Formulare aus. Behalten Sie den Hauptinhalt, Überschriften und Datentabellen.

Wie handhabe ich Seitenumbrüche im Druck-CSS?

Verwenden Sie page-break-before, page-break-after und page-break-inside. Die modernen Äquivalente sind break-before, break-after und break-inside aus dem CSS-Fragmentierungsstandard.

Verwandte Tools

Weitere css-tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Tool öffnen

Auch ausprobieren

Auch ausprobieren