Dica: CSS e o media print
12/03/2008 23:09
| Por: Diego Henrique Magrin
Muitos desenvolvedores utilizam CSS para modelar o estilo de seus sites, personalizando suas divs, seus textos, cores em geral, etc. Mas e quando é necessário fazer uma impressão de página? E pior, o que fazer quando tenho uma página de fundo escuro e as letras claras por exemplo? Muitos acabam criando uma cópia da página somente para a impressão do conteúdo gerando apenas mais um arquivo no servidor desnecessário.
Há no CSS um recurso pouco utilizado pelos desenvolvedores: o Media Print. Com o Media Print, você cria uma folha de estilos especificamente para tratar de como ficará o layout de seu site na hora que for impresso, isso facilita muito a impressão do site, pois você pode ocultar itens desnecessários como banners de publicidade, menus, etc além de poder trocar as cores para que fique uma impressão bem clean.
Vamos mostrar simplificadamente como uma folha de estilos do tipo media print funciona. O primeiro passo é criar um arquivo CSS para manipular os elementos que serão ou não impressos, e definir quais elementos não serão impressos no site. Por exemplo, se meu site possui uma DIV com id="publicidade" e eu quero que ela não seja mostrada na impressão, utilizamos a declaração display:none para ocultar o elemento na hora da impressão, como no exemplo abaixo:
#publicidade{
display:none;
}
O mesmo serve para classes, isto é comum também quando colocamos uma tag P com o texto Clique aqui para imprimir e quremos ocultá-la na impressão, é só definir o estilo desejado.
Após fazer todos os ajustes na folha de estilos de impressão, preciamos fazer a chamada dela na página que será impressa, colocando o seguinte trecho antes da tag </head>
<link rel="stylesheet" href="impressao.css" type="text/css" media="print">
enjoy !
Portfólio
Bem-vindo ao blog do Claretiano Web Center, o núcleo de desenvolvimento web de toda Ação Educacional Claretiana