Vytvořte stránku pro tisk s Gutenberg.css

Web designéři často zapomínají vytisknout protože dnes se zdá být mnohem méně potřebné. A to může být pravda pro digitální weby, jako je BuzzFeed.

Nicméně, na informační stránky je to stále dobrá praxe nabídnout vlastní styl tisku. Naštěstí nemusíte navrhovat své vlastní, protože Gutenberg je tady, aby vám pomohl.

Tato knihovna CSS pojmenovaná podle vynálezce tiskařského stroje Johannesa Gutenberga je samostatným zdrojem tisk návrhů stránek.

Prostě přidat gutenberg.css soubor do hlavy dokumentu a vy jste všichni nastaveni.

Kdykoliv se návštěvník vydá na tisk vaší stránky, měl by automaticky restyle na základě nastavení tisku. To lze nastavit pomocí media = "print" Atribut HTML.

Pokud se chcete dozvědět něco více, podívejte se na tuto příručku tiskové styly a jak fungují.

Dobrá věc na Gutenbergu je, že je to přichází s extra třídami a styly také.

Dig do složky motivů a najdete tři alternativní tisková témata: rezervovat, moderní, a starý styl. Můžete z nich udělat cokoliv výchozí přidáním na začátek výchozího nastavení gutenberg.css soubor.

Také můžete styl stránky jinak pro tisk přidáním konkrétních CSS tříd. Například .no-print třídy zcela skrýt prvek ve stylu tisku.

Dalším příkladem je přidávání URL odkazů vedle textu. Gutenberg přidává tuto funkci, aby usnadnil lidem najít adresy URL z vaší stránky. Ale můžete přidat .no-reformat třídy na kotevní prvek skrýt adresu URL.

Všechny tyto věci jsou pokryty repo GitHub a je to velmi jednoduché. Můžete mít Gutenberga instalován za méně než 5 minut a vaše celé stránky budou tiskové.

Tohle je zdaleka jedna z nejjednodušších a nejlepších knihoven, které lze implementovat pro lepší výkon stránek. To může přidat několik dalších KB, ale celkový zážitek bude výrazně lepší.

Pokud by obsah vašich stránek mohl být někdy z jakéhokoli důvodu Gutenberg.css je nepostradatelným zdrojem.