« HE:labs
HE:labs

CSS Para Mídia Impressa

Postado por Mikael Carrara em 02/04/2014

Estamos acostumados a projetar interfaces web sem nos preocupar muito com a versão para impressão do conteúdo. Mas em determinados tipos de projetos, como um blog por exemplo, em que a leitura é o foco de toda experiência, precisamos tomar cuidado para que a versão para impressão tenha uma experiência agradável.

Um usuário quando decide imprimir um determinado conteúdo, está interessado numa parte específica da interface. Ele não está interessado na barra lateral, nem no rodapé e muitos menos em links, pois como é de se esperar, as pessoas não podem clicar neles em páginas físicas.

A maioria dos componentes de interface indesejados são estrategicamente removidos na mídia impressa, mas os links precisam ser substituídos apenas pelo valor do seu atributo href. Você pode fazer isso usando apenas CSS:

1 a[href^=http]:after {
2   content:" <" attr(href) "> ";
3 }

Remova os componentes que não fazem sentido depois de impressos:

1 aside,
2 footer {
3   display: none;
4 }

É importante também fazer alguns ajustes no box-model, como por exemplo, o container do conteúdo poderia ocupar a folha inteira já que sumimos com a barra lateral:

1 #content {
2   width: 90%;
3   margin: 0;
4   padding: 0 5%;
5 }

Para referenciar uma folha de estilos específica para impressão diretamente no HTML:

1 <link rel="stylesheet" type="text/css" media="print.css">

Você também pode referenciá-la usando @media, por exemplo:

1 @media print {
2   body {
3     font-family: Georgia, serif;
4   }
5 }

Ou ainda melhor, usando @import. Todos os navegadores depois do IE6 suportam a regra @import. Use-a sem medo:

1 @import /styles/print.css print;

Num próximo post tentarei falar um pouco sobre seletores de página avançados e o problema das cores ao se desenvolver para mídia impressa. Existem ainda muito pontos que precisam ser considerados para se tirar o máximo proveito das folhas de estilo com saída para impressão. Procure pelas melhores práticas.

Compartilhe

Sabia que nosso blog agora está no Medium? Confira Aqui!