Stwórz stronę do druku z Gutenberg.css

Projektanci stron internetowych często o tym zapominają wydrukować ponieważ wydaje się to obecnie znacznie mniej potrzebne. Może to być prawdą w przypadku witryn cyfrowych, takich jak BuzzFeed.

Jednak dalej informacyjne strony internetowe wciąż dobrą praktyką jest oferowanie niestandardowy arkusz stylów wydruku. Na szczęście nie musisz projektować własnego, ponieważ Gutenberg jest tutaj, aby pomóc.

Nazwana na cześć wynalazcy prasy drukarskiej Johannesa Gutenberga, ta biblioteka CSS jest samodzielnym zasobem drukuj projekty stron.

Ty tylko Dodaj gutenberg.css plik do twojej głowicy i wszystko gotowe.

Ilekroć odwiedzający je drukuje, powinien to zrobić automatycznie zmienia styl na podstawie ustawień drukowania. Można to ustawić za pomocą media = „drukuj” Atrybut HTML.

Sprawdź ten przewodnik, jeśli chcesz dowiedzieć się więcej na ten temat wydrukuj arkusze stylów i jak one działają.

Dobrą rzeczą w Gutenberg jest to, że pochodzi z dodatkowymi klasami i stylami zbyt.

Kopiuj do folderu motywów, a znajdziesz trzy alternatywne motywy drukowania: książka, nowoczesny, i w starym stylu. Możesz zrobić dowolną z nich domyślna dodając je do domyślnych gutenberg.css plik.

Możesz także stylizuj stronę inaczej do drukowania dodając konkretne klasy CSS. Na przykład .bez druku klasa będzie całkowicie ukryć element w stylu drukowania.

Innym przykładem jest dodanie adresów URL linków obok tekstu. Gutenberg dodaje tę funkcję, aby ułatwić ludziom znajdowanie adresów URL na Twojej stronie. Ale możesz dodać .bez formatowania klasa na element kotwicy do ukryj adres URL.

Wszystko to jest opisane w repozytorium GitHub i jest bardzo proste. Możesz mieć Gutenberga zainstalowany w mniej niż 5 minut Twoja cała strona będzie przyjazna dla druku.

To jest zdecydowanie jedna z najprostszych i najfajniejszych bibliotek do wdrożenia dla lepszej wydajności witryny. Może dodać kilka dodatkowych KB, ale ogólne doświadczenie zostanie znacznie poprawione.

Jeśli zawartość Twojej witryny może być kiedykolwiek wydrukowane z dowolnego powodu następnie Gutenberg.css jest niezbędnym zasobem.