Skip to main content

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

VLOG #225 MI SUEGRA TURCA PRUEBA MIS EMPANADAS TURCAS (Abril 2025)

VLOG #225 MI SUEGRA TURCA PRUEBA MIS EMPANADAS TURCAS (Abril 2025)
Anonim

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 uma tela de algum tipo. Existe outra maneira de alguém visualizar seu website, de 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 que imprimiam sites eram um cenário bem comum. Lembramos que nos reunimos com muitos clientes que eram novos na Web e nos sentimos mais confortáveis ​​revisando as páginas impressas do site. Eles então nos deram feedback e editaram esses pedaços de papel em vez de olhar para a tela para discutir o site. À medida que as pessoas se sentem mais confortáveis ​​com as telas de suas vidas, e à medida que essas telas se multiplicam várias vezes, temos visto cada vez menos pessoas tentando imprimir páginas da Web no papel, mas isso ainda acontece. Você pode querer considerar este fenômeno quando você planeja o seu site. Você quer que as pessoas imprimam suas páginas da web? Talvez você não faça. Se for esse o caso, você tem algumas opções.

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

É fácil usar CSS para impedir que as pessoas imprimam suas páginas da web. Você simplesmente precisa criar uma folha de estilo de 1 linha chamada "print.css" que inclua a seguinte linha de CSS.

corpo {exibição: nenhum; }

Esse estilo único transformará o elemento "body" de suas páginas em não exibidas - e como tudo em suas páginas é filho do elemento body, isso significa que toda a página / site não será exibida.

Depois de ter sua folha de estilo "print.css", você a carregaria 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 essa página da Web estiver configurada para impressão, para usar essa folha de estilo em vez de qualquer folha de estilo padrão, as páginas serão usadas para exibição na tela. À medida que as páginas mudam para essa folha "print.css", o estilo que faz com que toda a página não seja exibida será ativado e tudo o que será impresso será uma página em branco.

Bloquear uma página de cada vez

Se você não precisar bloquear muitas páginas em seu site, poderá bloquear a impressão página por página, com os seguintes estilos colados no cabeçalho do seu HTML.

Esse 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 essa linha ainda seriam impressas normalmente.

Fique mais elegante com suas páginas bloqueadas

E se você quiser bloquear a impressão, mas não quer que seus clientes fiquem frustrados? Se eles virem uma impressão de página em branco, poderão ficar chateados e pensar que sua impressora ou computador está quebrado e não perceberam que você basicamente desativou a impressão!

Para evitar a frustração do visitante, você pode ficar um pouco mais chique 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, na parte superior da página, logo após a tag body, coloque:

E feche essa tag depois que todo o seu conteúdo estiver 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 destina-se a ser visualizada online e não pode ser impressa. Por favor, veja esta página em http://webdesign.about.com/od/advancedcss/qt/block_print.htm

Inclua um link para o seu documento CSS impresso chamado print.css:

E nesse documento incluem 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 impressa apareça apenas na página impressa, enquanto a página da Web aparece apenas na página on-line.

Considere a experiência do usuário

Imprimir páginas da web geralmente é uma experiência ruim, já que os sites de hoje geralmente não são bem traduzidos para a página impressa. Se você não deseja criar uma folha de estilo totalmente separada para ditar os estilos de impressão, considere usar as etapas deste artigo para "desligar" a impressão em uma página. Esteja ciente do impacto que isso pode ter em usuários que dependem de sites de impressão (talvez porque tenham pouca visão e dificuldade para ler textos na tela) e tomem decisões que funcionem para o público de seu site.

Artigo original de Jennifer Krynin. Editado por Jeremy Girard.