As páginas da Web devem ser visualizadas em uma tela. Embora haja uma grande variedade de dispositivos possíveis que podem ser usados para visualizar um site (desktops, laptops, tablets, telefones, wearables, TVs, etc.), todos eles incluem algum tipo de tela. Existe outra maneira de alguém ver seu site, uma maneira que não inclui uma tela. Estamos nos referindo a uma impressão física de suas páginas da web. Anos atrás, você descobriria que as pessoas imprimindo sites eram um cenário bastante comum. Nós nos lembramos de encontrar muitos clientes que eram novos na web e se sentiam mais à vontade para revisar as páginas impressas do site. Em seguida, eles nos forneceram feedback e edições nessas folhas de papel, em vez de olhar para a tela para discutir o site. À medida que as pessoas se tornam mais confortáveis com as telas em suas vidas, e como essas telas se multiplicam muitas vezes, temos visto cada vez menos pessoas tentando imprimir páginas da web em papel, mas isso ainda acontece. Você pode querer considerar esse fenômeno ao planejar seu site. Você quer que as pessoas imprimam suas páginas da web? Talvez você não saiba. Se for esse o caso, você tem algumas opções.
Como bloquear a impressão de uma página da web com CSS
É fácil usar CSS para evitar que as pessoas imprimam suas páginas da web. Você simplesmente precisa criar uma folha de estilo de 1 linha chamada “print.css” que inclui a seguinte linha de CSS. corpo {display: nenhum; }
Este estilo fará com que o elemento “body” de suas páginas não seja exibido – e como tudo em suas páginas é filho do elemento body, isso significa que a página / site inteiro não será exibido. Depois de ter sua folha de estilo “print.css”, você deve carregá-la em seu HTML como uma folha de estilo de impressão. Aqui está como você faria isso – basta adicionar a seguinte linha ao elemento “head” em suas páginas HTML.
Essas informações informam ao navegador que, se esta página da web estiver configurada para impressão, use esta folha de estilo em vez de qualquer folha de estilo padrão que as páginas usem para exibição na tela. À medida que as páginas mudam para esta folha “print.css”, o estilo que faz com que a página inteira não seja exibida aparecerá e tudo o que será impresso será uma página em branco.
Bloquear uma página de cada vez
Se você não precisa bloquear muitas páginas em seu site, pode bloquear a impressão página a página com os seguintes estilos colados no cabeçalho de seu HTML.
Este estilo in-page teria uma especificidade mais alta do que qualquer estilo dentro de suas folhas de estilo externas, o que significa que a página não seria impressa, enquanto outras páginas sem esta linha ainda seriam impressas normalmente.
Fique mais sofisticado com suas páginas bloqueadas
E se você quiser bloquear a impressão, mas não quiser que seus clientes fiquem frustrados? Se virem a impressão de uma página em branco, podem ficar chateados e pensar que a impressora ou o computador está quebrado e não perceber que você basicamente desativou a impressão! Para evitar a frustração do visitante, você pode ficar um pouco mais elaborado e colocar uma mensagem que só será exibida quando seus leitores imprimirem a página – substituindo o outro conteúdo. Para fazer isso, crie sua página da web padrão e, no topo da página, logo após a tag do corpo, coloque:
E feche essa tag depois que todo o seu conteúdo for escrito, na parte inferior da página:
Em seguida, depois de fechar o div “noprint”, abra outro div com a mensagem que você deseja exibir quando o documento for impresso:
Esta página deve ser visualizada online e não pode ser impressa. Veja esta página em http://webdesign.lifewire.com/od/advancedcss/qt/block_print.htm
Inclua um link para seu documento CSS de impressão denominado print.css:
E nesse documento inclua os seguintes estilos: #noprint {display: none; }
#print {display: block; }
Finalmente, em sua folha de estilo padrão (ou em um estilo interno no cabeçalho do documento), escreva: #print {display: none; }
#noprint {display: block; }
Isso garantirá que a mensagem de impressão apareça apenas na página impressa, enquanto a página da web apareça apenas na página online.
Considere a experiência do usuário
A impressão de páginas da Web geralmente é uma experiência ruim, pois os sites de hoje geralmente não se traduzem bem na página impressa. Se você não deseja criar uma folha de estilo totalmente separada para ditar estilos de impressão, você pode considerar o uso das etapas deste artigo para “desligar” a impressão em uma página. Esteja ciente do impacto que isso pode ter sobre os usuários que dependem de sites de impressão (talvez porque eles têm visão ruim e dificuldade para ler texto na tela) e tome decisões que funcionarão para o público de seu site.
Artigo original de Jennifer Krynin. Editado por Jeremy Girard.