Eu esqueci completamente sobre folhas de estilo de impressão

Uma pequena coleção de técnicas CSS úteis e um lembrete rápido de que as folhas de estilo de impressão ainda são uma coisa.

Aaron Gustafson enviou recentemente um tweet para Indiegogo no qual ele apontou que suas páginas de detalhes de pedido não são utilizáveis ??quando impressas.

Quando vi este tweet, fiquei impressionado, porque percebi que faz muito tempo desde que eu otimizei uma página para impressão ou sequer pensei na verificação.
Talvez seja devido ao constante redimensionamento de nossos navegadores e garantir que nossos sites funcionem perfeitamente em todos os formatos e tamanhos, ou talvez seja porque eu raramente imprimo as páginas da web sozinho. Seja o que for, eu esqueci completamente sobre folhas de estilo de impressão e isso é ruim.

A otimização de páginas da web para impressão é importante porque queremos que nossos sites sejam o mais acessíveis possível, independentemente do meio. Não devemos fazer suposições sobre nossos usuários e seu comportamento. As pessoas ainda imprimem páginas da web. Basta pensar em artigos ou posts, receitas, informações de contato e direções ou sites de imóveis. Alguém em algum lugar, eventualmente, tentará imprimir uma das páginas que você fez.

Eu desisti de impressoras domésticas há muito tempo, porque elas sempre pareciam se quebrar depois de dez minutos de uso. Mas nem todo mundo é como eu, …

-Heydon Pickering (padrões de design inclusivo)

Se você se vê em uma posição semelhante à que eu fiz, este post irá servi-lo bem como uma atualização rápida. Se você ainda não otimizou as páginas para impressão com CSS, as dicas a seguir ajudarão você a começar.

1. Incorporando folhas de estilo de impressão

A melhor maneira de incorporar estilos de impressão é declarar a regra @media no seu CSS.

 body { 
tamanho da fonte: 18px;
}
 @media print { 
/ * estilos de impressão vão aqui * /
body {
tamanho da fonte: 28px;
}
}

Como alternativa, você pode incorporar seus estilos de impressão em HTML, mas isso fornecerá uma solicitação extra.

 <link media = "print" href = "print.css" /> 

2. Teste

Você não precisa imprimir uma página toda vez que fizer uma pequena alteração. Dependendo do seu navegador, você pode exportar a página como um PDF, mostrar uma visualização de impressão ou até mesmo depurar diretamente no navegador.

Para depurar estilos de impressão no Firefox, abra a Barra de Ferramentas do Desenvolvedor ( Shift + F2 ou Tools > Web Developer > Developer Toolbar ) e insira media emulate print no campo de entrada na parte inferior da janela do navegador e pressione enter . A guia ativa agirá como se o tipo de mídia fosse print até você fechá-lo ou atualizar a página.

emulação de estilo de impressão no Firefox

No Chrome, abra o DevTools ( CMD + Opt + I (macOS) ou Ctrl + Shift + I (Windows) ou View > Developer > Developer Tools ) e mostre a gaveta do console ( Esc ), abra o painel de renderização, marque Emulate CSS Media e selecione Imprimir

emulação de estilo de impressão no Chrome

3. unidades absolutas

Unidades absolutas são ruins para telas, mas ótimas para impressão. Em folhas de estilo de impressão é completamente seguro e recomendado usar unidades absolutas como cm , mm , in , pt ou pc .

 seção { 
margem-fundo: 2cm;
}

4. Regras específicas da página

É possível definir propriedades específicas para a página, como dimensões, orientação e margens, com a regra @page . Isso é muito útil se você quiser que todas as páginas tenham uma certa margem.

 @media print { 
@página {
margem: 1 cm;
}
}

A regra @page é parte do Módulo de Mídia @page , que oferece todos os tipos de coisas incríveis, por exemplo, selecionando a primeira página impressa ou páginas em branco, posicionando elementos nos cantos de uma página e muito mais . Você pode até usá-lo para fazer livros .

5. Controle de quebras de página

Como as páginas impressas não são infinitas como as páginas da web, o conteúdo acabará quebrando em uma página e continuará na próxima página. Temos 5 propriedades para controlar o que acontece nesse caso.

Quebras de página antes de um elemento

Se quisermos que um elemento esteja sempre no início de uma página, podemos forçar uma quebra de page-break-before com quebra de page-break-before .

 seção { 
page-break-before: sempre;
}

page-break-before no MDN

Quebras de página depois de um elemento

page-break-after vamos nos forçar ou evitar quebras de página após um elemento.

 h2 { 
page-break-after: sempre;
}

page-break-after em MDN

Quebras de página dentro de um elemento

Esta propriedade é ótima se você quiser evitar que um elemento seja dividido entre duas páginas

 ul { 
page-break-inside: evite;
}

page-break-inside no MDN

Viúvas e Órfãos

Às vezes você pode não querer forçar uma quebra de página, mas pelo menos controlar quantas linhas são exibidas na página atual ou na próxima.
Por exemplo, se a última linha de um parágrafo não couber na página atual, as duas últimas linhas desse parágrafo serão impressas na próxima página, mesmo que apenas a última não tenha se encaixado. Isso porque a propriedade que controla isso – widows – é definida como 2 por padrão. Nós podemos mudar isso.

 p { 
viúvas: 4;
}

Se for o contrário e apenas uma linha couber na página atual, todo o parágrafo será impresso na próxima página. A propriedade responsável por esse comportamento é orphans e seu valor padrão é 2 também.

 p { 
órfãos: 3;
}

O código acima significa que pelo menos 3 linhas precisam caber na página atual para que o parágrafo não se mova para a próxima página como um todo.

Há uma CodePen pronta com alguns exemplos. ( Versão de depuração para teste mais fácil)

Nem todas as propriedades e valores funcionam em todos os navegadores , você deve verificar seus estilos de impressão em diferentes navegadores.

6. Redefinindo Estilos

Faz sentido redefinir alguns estilos como background-color , box-shadow ou color para impressão.

Aqui está um trecho da folha de estilos de impressão HTML5 Boilerplate :

 *, 
*:antes,
*:depois de,
*:primeira carta,
p: primeira linha,
div: primeira linha,
blockquote: primeira linha,
li: first-line {
fundo: transparente! importante;
cor: # 000! importante;
box-shadow: nenhum! importante;
text-shadow: nenhum! importante;
}

As folhas de estilo de impressão são uma das poucas exceções em que não há problema em usar !important ;).

7. Removendo conteúdo desnecessário

Para evitar desperdício de tinta desnecessário, você deve remover materiais irrelevantes, como conteúdo de apresentação, anúncios, navegação, etc. com display: none .

Você pode até querer apenas mostrar o conteúdo principal e ocultar todo o resto.

 body> *: não (principal) { 
Mostrar nenhum;
}

8. Revelando URLs em links

Links impressos são completamente inúteis se você não sabe onde estão os líderes.

É muito fácil exibir um destino de links ao lado de seu texto.

 a [href]: depois de { 
content: "(" attr (href) ")";
}

Naturalmente, isso exibirá links relativos, links absolutos para seu site, âncoras etc. Algo como isso pode funcionar melhor:

 a [href ^ = "http"]: não ([href * = "mywebsite.com"]): após { 
content: "(" attr (href) ")";
}

Parece insano, eu sei. Essas linhas significam: Exibir o valor do atributo href ao lado de cada link que possui um atributo href , que começa com http , mas não tem mywebsite.com em seu valor.

9. Revelando expansões em abreviaturas

Abreviações devem ser agrupadas em elementos <abbr> e suas expansões incluídas no atributo title . Faz sentido exibir aqueles em páginas impressas.

 abbr [title]: after { 
content: "(" attr (título) ")";
}

10. Forçando a impressão em segundo plano

Normalmente, os navegadores não imprimem cores de plano de fundo e imagens de plano de fundo se você não disser, mas às vezes você pode querer forçá-los a imprimi-los. A propriedade não padronizada print-color-adjust permite sobrescrever as configurações padrão de alguns navegadores.

 cabeçalho { 
-webkit-print-color-adjust: exato;
print-color-adjust: exato;
}

11. Consultas de Mídia

Se você escrever suas consultas de mídia, como no exemplo a seguir, esteja ciente de que as regras de CSS nessa consulta de mídia não se aplicarão à folha de estilos de impressão.

 @media screen e (min-width: 48em) { 
/ * somente tela * /
}

Porque você pergunta? Porque as regras de CSS só se aplicam se a min-width 48em for 48em e a screen media-type . Ao se livrar da palavra-chave screen a consulta de mídia é limitada apenas pela min-width .

 @media (min-width: 48em) { 
/ * todos os tipos de mídia * /
}

12. Imprimindo mapas

As versões atuais do Firefox e do Chrome podem imprimir mapas, mas o Safari, por exemplo, não é. Alguns serviços fornecem mapas estáticos que você pode usar.

 .map { 
largura: 400px;
altura: 300 px;
background-image: url ('http://maps.googleapis.com/maps/api/staticmap?center=Wien+Floridsdorf&zoom=13&scale=false&size=400x300&maptype=roadmap&format=png&visual_refresh=true');
-webkit-print-color-adjust: exato;
print-color-adjust: exato;
}

13. códigos QR

Este artigo da revista Smashing tem algumas boas dicas. Uma delas é fornecer um código QR para páginas impressas, para que os usuários não precisem digitar o URL inteiro para acessar a versão ao vivo.

Bônus: imprimindo páginas não otimizadas

Durante minha pesquisa, encontrei uma ótima ferramenta que ajuda a imprimir páginas não otimizadas. Com o Printliminator você pode remover elementos simplesmente clicando neles.

Há uma demonstração no YouTube e o projeto no Github .

Bônus II: Gutenberg

Se você gosta de frameworks, você pode gostar de Gutenberg, que torna a otimização para impressão um pouco mais fácil.

Bônus III: Hartija

Há outro framework para folhas de estilo de impressão de Vladimir Carrer chamado Hartija .