Com o CSS, é possível ter diferentes versões de uma mesma página apenas trocando as folhas de estilo. Um ótimo exemplo de ver como isso acontece na prática é explorar os diferentes temas do CSS Zen Garden, um site especialista de mostrar como, com um mesmo markup, é possível dar diferentes “make ups” para as páginas, onde a imaginação é o limite.
Porém, outra poderosa ferramenta do CSS é usá-lo para definir folhas de estilos em diferentes contextos, como carregar folhas de estilos específicas para telas maiores como TV e uma folha de estilo personalizada para ser carregada quando o documento é usado para impressão.
Modo impressão não é só para impressora
Pode parecer uma dica nada valiosa, até mesmo ultrapassada para alguns que perguntam: “por que vou querer um CSS personalizado para impressão nos dias de hoje, em que cada vez menos pessoas usam a impressão?”
Bem, existe aplicações úteis para usar a versão para impressão para gerar PDF’s de forma fácil de textos e documentos que são exportados de uma página web, e com um CSS otimizado para impressão, você pode fazer este documento ficar completamente amigável para ser impresso como documento.
Então segue alguns exemplos de situações em que uma versão para impressão é útil:
- Se você tem websites no estilo portal, você pode adaptá-lo para se tornar um jornal
- Os requisitos de fontes e cores para páginas para impressão são bem diferentes de uma página web, então uma versão para impressão é mais adaptada a leitura offline
- Páginas ricas em conteúdo podem ter versões impressas para pesquisas e trabalhos de faculdade
- Você pode ter uma versão para impressão de seu currículo online em que você não precise atualizar em lugares diferentes
Exemplo prático: Impressão de currículo a partir do blog
Dentre os exemplos, vou mostrar aqui na prática um guia para construir uma versão para impressão de um currículo online, que uso aqui mesmo no Blog. A partir do currículo aqui do blog, eu posso gerar um currículo amigável para impressão quando quero enviar para empresas em formato PDF ou até mesmo entregar em mãos dos recrutadores.
Definir um estilo para impressão no cabeçalho da página
Quando definimos uma folha de estilo, geralmente fazemos da seguinte forma:
<link rel="stylesheet" href="url" type="text/css" media="all" />
O atributo media=”all” define que este CSS será usado para todos tipos de telas e contextos, mas ele pode receber outros atributos, como por exemplo, o media print:
<link rel="stylesheet" href="url" type="text/css" media="print" />
Assim você está importando um arquivo CSS que define como a página deve ser apresentada no modo de impressão.
Usando Media queries
Há também uma forma também bastante simples e direta e que usei para gerar meu currículo a partir do blog. Ele define em um arquivo css qualquer usando media queries que usamos para otimizar no celular e que pode ser usado também para estabelecer regras de estilos para o modo de impressão:
[gist id=”cae3d9fbd4b790c15f1ffff04dcd8ae2″]
Resultado
