Como bloquear a impressão de uma página da web com CSS

paginas web destinam-se a ser visualizados 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 uma tela de algum tipo. 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 essas telas se multiplicam muitas vezes, temos visto cada vez menos pessoas tentando imprimir páginas da web em papel, mas ainda assim acontecer. 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 de 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 {exibição: nenhum; }

Este estilo transformará o elemento "corpo" de suas páginas em não sendo 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 for 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 seu folhas de estilo externas, o que significa que a página não seria impressa, enquanto outras páginas sem essa 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 body, coloque:

E feche essa tag depois que todo o seu conteúdo for escrito, na parte inferior da página:

Esta página deve ser visualizada online e não pode ser impressa. Por favor, veja esta página em http://webdesign.lifewire.com/od/advancedcss/qt/block_print.htm

#noprint {display: none; }
#print {display: block; }

#print {display: none; }
#noprint {display: block; }