Tutorial CSS

Mais um post de CSS e este tem como objetivo apresentar um simples tutorial para gerar duas versões de uma mesma página HTML: uma para visualização na internet e outra para impressão. Mas antes de começarmos, vejamos alguns conceitos de CSS em várias mídias e os tipos das mesmas, conhecidos como media types:

Sabemos que o CSS foi criado para possibilitar-nos determinar como nossas páginas HTML serão apresentadas em diferentes tipos de mídia. Não só apresentar, mas tornar o conteúdo bem apresentado em todas essas mídias. Para isso, basta criar um estilo CSS para cada meio de acesso, que pode ser feito das seguintes formas:

1. - Pelo @import: @import url("caminho_estilo.css") tipo_de_midia (por exemplo print);
2. - Pelo @media: @media tipo_de_midia;
3. - Pelo atributo media dentro da tag <link>.

Obs.: Os dois primeiros métodos devem ser inseridos entre <style> e </style> e são utilizados quando o estilo CSS é importado dentro dessa tag.

Agora que sabemos como atribuir o tipo de mídia utilizada, nos resta saber quais as mídias que podemos utilizar, que são:

1. - all: tipo padrão, apropriado para todos dispositivos;
2. - aural: tipo utilizado para páginas que serão lidas por sintetizadores de voz;
3. - braille: utilizado para dispositivos táteis, o usuário pode imprimir o conteúdo e ler depois.
4. - embossed: tipo específico da regra @media, também utilizado para usuários cegos, mais especificamente para impressões paginadas em braile;
5. - handheld: para PDAs, celulares e aparelhos que geralmente tem uma tela pequena, os smartphones podem ser excluídos desse tipo, já que apresentam telas de tamanho apropriado para mídias do tipo screen, aliás está sendo cada vez mais comum utilizar screen para smartphones;
6. - print: utilizado para impressão de páginas;
7. - projection: usado para apresentações projetadas;
8. - screen: utilizado para telas de computador, além de smartphones e tablets;
9. - tty: usado para dispositivos que usam uma grade fixa de caracteres: terminais, dispositivos portáteis, etc.;
10. - tv: utilizado para televisores de resolução e capacidade de rolagem baixas;

Página para Visualização na Internet

Para esse tipo de exibição não precisamos entrar em muitos detalhes, já que os posts anteriores de HTML e CSS aplicam-se a esse tipo de mídia. Basta acrescentar na tag link o atributo media e especificar o tipo de mídia como screen ou all, caso não houver mais estilos.

Página Impressa

Nesse caso, além de determinar o tipo de mídia como print, é necessário criar uma formatação que seja adequada a impressão. Segue algumas recomendações, conteúdo extraído do InfoWester:

1. - Definir todas as cores em tons de cinza;
2. - Sublinhar os links, e de preferência imprimir seus endereços;
3. - Escolher uma fonte serifada para os textos, que é mais fácil de ser lida no papel, já que foi criada para isso;
4. - Definir as unidades de texto em pontos, e não em pixels;
5. - Remover elementos não essenciais, como menus, barras laterais e, dependendo do caso, anúncios publicitários;
6. - Quando aplicável, destacar o endereço do site e o autor do texto.

Tendo essas recomendações em mente, basta passá-las para o CSS e depois importar esse estilo e definir o tipo de mídia como print.

Referências

CSS Media Types
HTML <link> media Attribute
O básico do CSS para impressão
O que são Media Types do CSS?