Crie uma página de impressão amigável com o Gutenberg.css

Web designers geralmente esquecem impressão porque parece muito menos necessário hoje em dia. E isso pode ser verdade para sites digitais como o BuzzFeed.

No entanto, sites informativos ainda é uma boa prática oferecer um folha de estilo de impressão personalizada. Felizmente, você não precisa criar seu próprio porque Gutenberg está aqui para ajudar.

Com o nome do inventor da impressora Johannes Gutenberg, esta biblioteca CSS é um recurso independente para imprimir designs de página.

Você apenas Adicione o gutenberg.css Arquivo na cabeça do seu documento, e está tudo pronto.

Sempre que um visitante vai imprimir sua página, ele deve restyle automaticamente com base na configuração de impressão. Isso pode ser definido usando o media = "print" Atributo HTML.

Confira este guia se você quiser aprender um pouco mais sobre folhas de estilo de impressão e como eles funcionam.

A coisa boa sobre Gutenberg é que vem com aulas e estilos extras também.

Cavar na pasta de temas e você encontrará três temas de impressão alternativos: livro, moderno, e estilo antigo. Você pode fazer qualquer um destes padrão adicionando-os em cima do padrão gutenberg.css Arquivo.

Além disso, você pode estilo a página de forma diferente para impressão adicionando classes CSS específicas. Por exemplo, o .sem impressão classe vai esconder completamente um elemento no estilo de impressão.

Outro exemplo é o adição de URLs de link ao lado do texto. O Gutenberg adiciona este recurso para tornar mais fácil para as pessoas encontrarem os URLs da sua página. Mas você pode adicionar o .não-reformatar classe para o elemento âncora para esconder o URL.

Tudo isso é coberto no repositório do GitHub e é muito simples. Você pode ter Gutenberg instalado em menos de 5 minutos e todo o seu site será compatível com impressão.

Isto é de longe, uma das bibliotecas mais simples e legais para implementar para melhor desempenho do site. Pode adicionar alguns KBs extras, mas a experiência geral será melhorada drasticamente.

Se o conteúdo do seu site puder ser impresso por qualquer motivo então Gutenberg.css é um recurso indispensável.