Hozzon létre egy nyomtatottbarát oldalt a Gutenberg.css segítségével

A webes tervezők gyakran elfelejtenek nyomtatás mert ma kevésbé szükségesnek tűnik. És ez igaz lehet a digitális webhelyekre, mint a BuzzFeed.

Azonban tájékoztató weboldalak még mindig jó gyakorlat, ha a egyedi nyomtatási stíluslap. Szerencsére nem kell saját terveznie, mert Gutenberg itt van, hogy segítsen.

A Johannes Gutenberg nyomdai feltalálója után elnevezett CSS könyvtár önálló erőforrás nyomtatási oldalak tervezése.

Te csak adja hozzá a gutenberg.css fájl a dokumentum fejébe, és mindannyian beállítva.

Amikor egy látogató az oldalának kinyomtatásához megy, meg kell automatikusan újraindul a nyomtatási beállítás alapján. Ezt a media = "print" HTML attribútum.

Nézze meg ezt az útmutatót, ha többet szeretne megtudni nyomtatási stíluslapok nyomtatása és hogyan működnek.

A szép dolog Gutenbergben az, hogy extra osztályokkal és stílusokkal rendelkezik is.

Bekerül a témák mappájába, és megtalálja három alternatív nyomtatási téma: könyv, modern, és régi stílus. Ezek közül bármelyiket megteheti alapértelmezett az alapértelmezett értékek hozzáadásával gutenberg.css fájl.

Akkor is a nyomtatáshoz másképpen formázza az oldalt speciális CSS osztályok hozzáadásával. Például a .no-print osztály akarata teljesen elrejteni egy elemet nyomtatási stílusban.

Egy másik példa a link URL-ek hozzáadása a szöveg mellett. Gutenberg hozzáadja ezt a funkciót, hogy megkönnyítse az emberek számára az URL-ek megtalálását az oldalról. De hozzáadhatja a .no-formázni a horgony elemre az URL elrejtése.

Mindezek a dolgok a GitHub repóján vannak és nagyon egyszerű. Lehet Gutenberg kevesebb, mint 5 perc alatt telepíthető és az egész webhely nyomtatásbarát lesz.

Ez messze az egyik legegyszerűbb és legmenőbb könyvtár a jobb teljesítmény érdekében. Kiegészíthet néhány extra KB-t, de a teljes tapasztalat drasztikusan javul.

Ha a webhelyének tartalma valaha is megtörténhet bármilyen okból nyomtatva akkor Gutenberg.css nélkülözhetetlen erőforrás.