Erstellen Sie eine druckerfreundliche Seite mit Gutenberg.css

Webdesigner vergessen oft drucken weil es heutzutage viel weniger notwendig erscheint. Dies kann für digitale Sites wie BuzzFeed zutreffen.

Jedoch auf Informationswebseiten Es ist immer noch eine gute Praxis, eine anzubieten benutzerdefiniertes Druck-Stylesheet. Zum Glück müssen Sie nicht Ihre eigenen entwerfen, weil Gutenberg ist hier um zu helfen.

Benannt nach dem Erfinder der Druckmaschine Johannes Gutenberg ist diese CSS-Bibliothek eine eigenständige Ressource für Seitenentwürfe drucken.

Sie gerade Ergänzen Sie die gutenberg.css Datei in Ihren Dokumentenkopf, und Sie sind fertig.

Wann immer ein Besucher Ihre Seite druckt, sollte dies geschehen automatisch restyle basierend auf der Druckeinstellung. Dies kann mit eingestellt werden media = "drucken" HTML-Attribut.

Sehen Sie sich diese Anleitung an, wenn Sie mehr darüber erfahren möchten Stylesheets drucken und wie sie arbeiten.

Das Schöne an Gutenberg ist, dass es so ist kommt mit zusätzlichen Klassen und Styles auch.

Suchen Sie in den Ordner "Themes" und Sie werden finden drei alternative Druckthemen: Buch, modern, und alter Stil. Sie können jeden dieser machen Standard indem Sie sie über den Standard hinzufügen gutenberg.css Datei.

Du kannst auch gestalten Sie die Seite für den Druck anders durch Hinzufügen bestimmter CSS-Klassen. Zum Beispiel die .Kein Druck Klasse wird ein Element vollständig ausblenden im Druckstil.

Ein anderes Beispiel ist das Hinzufügen von Link-URLs neben dem text. Gutenberg fügt diese Funktion hinzu, damit Benutzer die URLs auf Ihrer Seite leichter finden können. Aber du kannst das hinzufügen .Kein Neuformat klasse auf das Ankerelement auf verstecken Sie die URL.

All dieses Zeug ist im GitHub-Repo enthalten und sehr einfach. Sie können Gutenberg haben in weniger als 5 Minuten installiert und Ihre gesamte Website wird druckfreundlich sein.

Das ist bei weitem eine der einfachsten und coolsten Bibliotheken, die implementiert werden können für eine bessere Leistung der Website. Es kann einige zusätzliche KBs hinzufügen, aber das Gesamterlebnis wird drastisch verbessert.

Wenn der Inhalt Ihrer Website jemals sein könnte aus irgendeinem Grund gedruckt Dann ist Gutenberg.css eine unverzichtbare Ressource.