No passado, a criação de uma versão amiga da impressora de uma página da web significa projetar uma página separada com o layout e a formatação modificada para que você possa obter resultados satisfatórios ao imprimir. Agora, usando XHTML e CSS estruturados, você pode obter o mesmo efeito com muito menos esforço. A maioria das páginas da web, desde a exibição da tela até o efeito de impressão
No passado, a criação de uma versão amiga da impressora de uma página da web significa projetar uma página separada com o layout e a formatação modificada para que você possa obter resultados satisfatórios ao imprimir. Agora, usando XHTML e CSS estruturados, você pode obter o mesmo efeito com muito menos esforço.
Da tela da tela ao efeito de impressão
A maioria das páginas da web é projetada para ser adequada para visualização nas telas de computador. No entanto, às vezes os usuários precisam imprimir certas páginas, talvez apenas para manter um registro de longo prazo ou usá-lo como uma referência offline conveniente.
O problema agora é que muitos dos recursos que fazem a página da web parecer atraente e colorida na tela colorida do computador não pode mostrar o mesmo efeito na versão impressa da página da web - especialmente quando a impressora é preto e branco. Quando rebaixado para a impressão em escala de cinza, a combinação de cores perderá o efeito de contraste (original); Os gráficos parecerão distorcidos e levarão muito tempo para imprimir; Os botões de navegação que desempenham um papel importante na página da web são inúteis na página de impressão.
Para superar esses problemas, os criadores da web geralmente projetam uma versão da página amigável para impressoras, para que os visitantes tenham o desejo de imprimir. As versões que amigam a impressora geralmente incluem o mesmo conteúdo da página da web principal, mas a maioria dos gráficos, fundos e elementos de navegação são omitidos. A página também converte a cor em algum formulário para gerar imagens aceitáveis em escala de cinza.
Solução CSS
Uma vantagem de separar o conteúdo e a representação usando tags xhtml estruturadas e formatos CSS é que, alterando o estilo CSS, você pode reformar facilmente o conteúdo. Portanto, a criação de uma página amiga da impressora é vincular um arquivo CSS diferente à mesma página XHTML.
Você pode vincular a folha de estilo de tela e a folha de estilo de impressão ao mesmo arquivo xhtml ao mesmo tempo, portanto, não há necessidade de criar uma página que seja amiga da impressora separadamente, apenas uma folha de estilo que favora a impressora é suficiente. Quando você adiciona arquivos de tipo multimídia ao código do link, isso está dizendo ao navegador que as regras CSS a seguir ou ignorar para a saída da tela e quais regras usam para imprimir.
Aqui está um exemplo de ligação a um par de arquivos CSS:
A seguir, o conteúdo citado:
<linkrel = stylesheettype = text/cssmedia = screenhref = mysite-screen.css/>
<linkrel = stylesheettype = text/cssmedia = printthref = mysite-print.css/>
Se você precisar suportar navegadores mais antigos, deve se manter no uso da tela e da tela dos descritores de mídia do CSS1. Eles são mutuamente exclusivos; portanto, ao gerar páginas para exibição da tela, o navegador ignora a folha de estilo de impressão e vice -versa. Portanto, cada folha de estilo precisa conter o mesmo seletor de estilo, mas existem diferentes declarações de regras para gerar estilos de página separadamente para diferentes dispositivos de saída.
Simplifique CSS
Se você estiver disposto a desistir de cuidar de navegadores mais antigos e assumir que seus usuários estão usando navegadores habilitados para CSS2 (como IE5 e acima ou Netscape6 e acima), você pode usar o novo descritor de mídia para simplificar bastante o código CSS.
Aqui está um exemplo de vinculação usando descritores de mídia CSS2:
A seguir, o conteúdo citado:
<linkrel = stylesheettype = text/cssmedia = alhref = mysite-ll.css/>
<linkrel = stylesheettype = text/cssmedia = printthref = mysite-print2.css/>
Esses links são quase exatamente os mesmos que os anteriores; A diferença é que o arquivo CSS contém estilos para impressão de mídia.
Os estilos associados à mídia = todos no arquivo CSS podem ser aplicados na exibição da tela, impressão e todas as outras mídias, para que você possa colocar todos os estilos criados nesse arquivo. O arquivo CSS que está associado individualmente à mídia = impressão pode ser muito menor porque a página herda todos os estilos de todos os arquivos de mídia; portanto, não há necessidade de copiar esses estilos no arquivo de mídia de impressão.
Os únicos estilos necessários no arquivo CSS de mídia impressa são aqueles que alteram ou adicionam estilos de página para impressão. De um modo geral, isso nada mais é do que alguns estilos que proíbem exibir divs contendo gráficos e conteúdo de navegação e substituindo o rótulo do corpo e as configurações de largura e em branco da div principal por configurações adequadas para impressões.
Esse truque funciona porque todos os arquivos CSS de mídia e arquivos CSS de mídia impressa são combinados nas mesmas regras de estilo em cascata. Portanto, a ordem do link desses arquivos CSS é bastante importante. Todos os links de arquivo de mídia devem ser colocados antes da impressão de links de arquivo de mídia.
Aqui estão algumas dicas sobre o uso de arquivos CSS de mídia impressa:
Se você proibir a exibição de uma div, deve usar a exibição: Nenhum, em vez de visibilidade: Hidden.
Nem pontos nem polegadas são unidades de medição corretas para exibição da tela, mas são unidades de medição corretas para impressões.
O seletor usado nos arquivos de mídia de impressão deve ser exatamente o mesmo que o seletor que você usa em todos os arquivos de mídia. Por exemplo, se você usar o div #sidenav para selecionar o Divs com o ID como Sidenav em todos os arquivos de mídia, o uso do #Sidenav na impressão de arquivos de mídia pode não conseguir atingir com sucesso sua meta.
Não se esqueça de forçar explicitamente a declaração de regra que muda de um arquivo para outro. Por exemplo, se você definir o preenchimento para um elemento em todos os arquivos de mídia e desejar remover esse preenchimento na impressão, ele não é suficiente para adicionar um estilo que ignora a declaração de preenchimento no arquivo de mídia de impressão - você deve definir explicitamente o preenchimento: 0pt para substituir as configurações anteriores.
Se você estiver usando um editor gráfico como o Dreamweaver, poderá visualizar o efeito da tela da página gerada em vez do efeito de impressão. Para visualizar o estilo de impressão na janela Dreamweaver Design Viewing, altere o link para o arquivo CSS de mídia de impressão para mídia = tela. Isso permite que você visualize o estilo CSS no arquivo de mídia impressa. Não se esqueça de alterar o descritor de mídia de volta para mídia = imprimir antes de postar sua página.
Quando você precisa fornecer aos seus visitantes uma página da web amigável para impressoras, você não precisa mais criar uma versão separada da página original. Adicionar um link a uma folha de estilo CSS com Media = Print Media Descriptor pode converter qualquer página XHTML/CSS em uma página amiga da impressora.