É sempre bom permitir aos usuários imprimir o conteúdo de seu site. Melhor ainda é permitir que eles imprimam e ainda economizem tinta e papel, removendo da impressão tudo o que não for referente ao conteúdo

Vendo um post no blog fechaTag, resolvi explicar como fazer um estilo CSS que será usado apenas na hora da impressão.

Idéia principal

A principal razão para se criar um estilo próprio para impressão é eliminar qualquer conteúdo que não seja útil para o usuário. Por exemplo, imagens, banners, logos, menus e qualquer outra parte do template que não faça parte do conteúdo principal.

Dessa forma, o usuário não correrá o risco de perder algumas páginas por causa do banner que passou do limite da página, do menu que é grande e que precisa de 2 páginas a mais que o conteúdo, nem gastar tanta tinta com o logo da empresa em 16 milhões de cores ou com o Google Adsense no meio do conteúdo - afinal, ele não poderá clicar.

Um exemplo padrão

Abaixo segue um exemplo de CSS para impressão. Pode-se perceber que o principal atributo a ser utilizado será o display:none para esconder tudo o que não presta:

/* elimina o topo do site - logo, banner, caixa de busca, etc... */
#topo { display:none; }

/* elimina a coluna da esquerda - menu, banner (mais!), parceiros, etc... */
#col-esquerda { display: none; }

/* elimina a coluna da direita - outro menu, mais banners, shopping, etc... */
#col-direita { display: none; }

/* elimina todas as publicidades */
#google-adsense, #mercado-livre, #shopping, #buscape, #links-uol { display: none; }

/* elimina qualquer imagem do texto */
img { display: none; }

/* exibe apenas as imagens que pertencem ao conteúdo */
div#conteudo img { display: inline; }

/* coloca todo o texto em preto */
div#conteudo * { color: black !important; }

/* coloca todos os links em azul */
div#conteudo a { color: blue !important; text-decoration: underline !important; }

Basicamente é isso, remover tudo o que estiver em volta do conteúdo, liberando apenas as imagens referentes a ele. É importante também colocar todo o texto em preto e os links em azul com sublinhado, que é um padrão que todos sabem referir-se a um link.

O !important serve para forçar a regra aos atributos, evitando que um estilo da outra folha CSS seja atribuído aos elementos.

Adicionando o CSS

Para fazer com que o CSS criado acima só seja acionado na hora da impressão, o parâmetro media deve ser print:

<link rel="stylesheet" type="text/css" href="style-impressao.css" media="print" />

Testando o CSS

Para testar seu CSS de impressão, você não precisa gastar dezenas de folhas e litros de tintas imprimindo cópia atrás de cópia. Abra seu site no Firefox e no menu File procure por Print Preview. Aí é só verificar se está tudo correto e melhorar alguns alinhamentos.

Assunto relacionado: Veja outros tipos de media do CSS