Vytvorte stránku s podporou tlače pomocou Gutenberg.css

Web dizajnéri často zabúdajú vytlačiť pretože v dnešnej dobe sa zdá byť oveľa menej potrebné. A to môže byť pravda pre digitálne stránky ako BuzzFeed.

Avšak, na informačné webové stránky je stále dobrou praxou ponúknuť vlastný štýl tlače. Našťastie, nemusíte vytvárať vlastné, pretože Gutenberg je tu, aby vám pomohol.

Pomenovaný po vynálezcovi tlače Johannesa Gutenberga je táto knižnica CSS samostatným zdrojom vytlačiť návrhy stránok.

Ty iba pridajte gutenberg.css súbor do hlavičky dokumentov a vy ste všetci pripravení.

Kedykoľvek návštevník ide vytlačiť svoju stránku by mal automaticky obnoviť založené na nastavení tlače. Môžete ho nastaviť pomocou tlačidla media = "print" Atribút HTML.

Ak sa chcete dozvedieť niečo viac, pozrite si túto príručku tlač štýlov tlače a ako fungujú.

Hezká vec o Gutenbergu je, že to je prichádza s extra triedami a štýlmi tiež.

Skopírujte do priečinka témy a nájdete ich tri alternatívne tlačové témy: kniha, moderný, a starý štýl. Môžete urobiť ktorékoľvek z týchto štandardné tým, že ich pridáte na počiatočné nastavenie gutenberg.css súbor.

Tiež môžete vytlačte stránku iným spôsobom pre tlač pridaním špecifických tried CSS. Napríklad .no-print trieda bude úplne skryť prvok v štýle tlače.

Ďalším príkladom je pridanie odkazov URL vedľa textu. Gutenberg pridá túto funkciu, aby ľuďom pomohol nájsť adresy URL z vašej stránky. Ale môžete pridať .no-preformátovanie triedu na kotvový prvok skryť adresu URL.

Všetky tieto veci sú zahrnuté v repo GitHub a je to veľmi jednoduché. Môžete mať Gutenberg inštalované za menej ako 5 minút a vaša celá stránka bude vítaná pre tlač.

Toto je ďaleko jedna z najjednoduchších a najchladnejších knižníc pre lepšiu výkonnosť webu. Môže to pridať niekoľko KB, ale celková skúsenosť sa výrazne zlepší.

Ak bude obsah vašej lokality pravdepodobne vytlačené z akéhokoľvek dôvodu potom Gutenberg.css je nepostrádateľným zdrojom.