Recurso de impressão amigável – Todo site deveria ter

A dias atrás escrevi uma matéria falando de material de estudo sobre padrões web em português . Lendo a apostila criada pelo e-gov, tem um tópico com esse título.

Mas o que é uma “impressão amigável”?

Impressão amigável, é definir um css só para o usuário imprimir o conteúdo.

Quando mandamos imprimir uma página, estamos interessados somente no conteúdo. A página de impressão não deve vir com menu, cabeçalho, rodapé, banner, background do site, ilustrações enormes, etc etc… e é possível retirar esses elementos na hora do impressão com um css a parte.

copyNão é dificil, no tidbits nós usamos um template pronto de wordpress (que naturalmente, veio sem um css de impressão) e pra colocar eu criar um, não demorou nem 10 minutos.

O uso de folhas de estilo para equipamentos específicos é feito através do atributo media, existem vários tipos de media, mas na prática somente 3 tipos são usados, veja a relação abaixo de medias e dispositivos:

  • all – todos os tipos de dispositivos;
  • screen – computadores;
  • print – impressoras;
  • handheld – PDAs, mobiles palmtops;

Existem duas formas de escrever um atributo media que é colocado sempre dentro do <head> é claro:

Chamada externa:

<link media=“screen” type="text/css" href="style.css" rel="stylesheet"/>
<link media=“print” type="text/css" href="print.css" rel="stylesheet" />

<!-- ou assim pra quem prefere com import !-->

<style type="text/css">
@import url("style.css") screen;
@import url("print.css") print;
</style>

Repare que chamamos um css pra tela e um pra impressão.
Quando o atributo media não é declarado o padrão é media=”all”.

ou no css:

@media screen { 
	h1 { font-size:28px; color:#ff0;}
}
@media print { 
	h1 { font-size:14px; color:#000;}
}

Basicamente é bem rápido, não é necessário mexer em muitas tags, veja o que foi necessário para implementar aqui no tidbits:

@media print { 
	div#header, div#footer, div#sidebar-wrapper, 
	p.bookmark-me, div.post-footer, 
	form#commentform, h3.comentar {
		display:none;
	}
}

2 thoughts on “Recurso de impressão amigável – Todo site deveria ter

  1. Muito legal seu post. Só um toque, lá nas folhas de estilos externas, você colocou as 2 chamadas com o atributo media igual. O print.css está com o media “screen” também. Abraços.

Leave a Reply

Your email address will not be published. Required fields are marked *