10 dicas para melhores folhas de estilo de impressão
As folhas de estilo de impressão foram esquecidas, e ainda assim continuam importantes. Muitas pessoas imprimem artigos para ler durante viagens ou quando não têm acesso à Internet.
Folhas de estilo de impressão têm benefícios definidos . Por exemplo, ler no papel é menos cansativo para os olhos do que ler na tela.
Além disso, seguir os tutoriais é mais fácil se você tiver um ao lado de você, com o editor de código aberto na tela; Dessa forma, você não precisa alternar as janelas todas as vezes para procurar algo.
Neste artigo, vamos apontar 10 dicas simples que ajudarão você a criar melhores folhas de estilo de impressão .
Caso você tenha esquecido, veja como configurar uma folha de estilo de impressão:
o media="print" Esse atributo garante que os usuários não visualizem nenhum dos estilos definidos no arquivo print.css .
Porém, é necessária alguma atenção: se a folha de estilo principal não tiver atributo de mídia, a folha de estilos de impressão herdará seu estilo. Para separá-los, defina sua folha de estilos principal da seguinte maneira:
Aqui estão 10 dicas para você começar com a folha de estilos de impressão.
1. Remova a Navegação
Qual é a principal diferença entre papel e computador? O papel é estático, enquanto um computador é interativo. E para facilitar essa interação, os sites têm navegação, que se torna inútil no papel.
Oculte a navegação e outras partes do seu site que se tornam inúteis no papel, como barras laterais com links para outras postagens. O código para isso é muito fácil: basta definir o elemento display para none .
2. Ampliar a área de conteúdo
Com a navegação e a barra lateral removidas, nosso conteúdo agora está espalhado pela página. Isso faz com que a folha de estilo de impressão pareça mais um documento comum, em vez de uma versão em papel do site.
Tudo o que precisamos fazer para expandir o conteúdo é redefinir o float, remover todas as margens e definir a largura como 100%.
[css] #content {width: 100%; margin: 0; float: nenhum;} [/ css]3. Redefinir as cores do plano de fundo
A maioria dos navegadores já ignora as propriedades do plano de fundo para preservar a tinta. Mas, para garantir que todo o plano de fundo seja branco, podemos definir o corpo como branco e dar a cada elemento filho ainda na página um plano de fundo branco.
[css] body {background: white;} # conteúdo {background: transparent;} [/ css]4. Redefinir cores de texto
Ao redefinir o plano de fundo, outro problema é exibido. E se você tiver uma caixa “Informações do autor” cinza-escuro no final de suas postagens, com o texto em cinza claro ou branco? Com o plano de fundo agora definido para branco, essa informação ficará invisível.
Para corrigir isso, altere qualquer texto de cor clara para algo mais escuro: preto ou, de preferência, cinza escuro.
[css] #author {color: # 111;} [/ css]
Levar Sam Brown O blog acima. Você poderia imaginar como seria se ele não redefinisse as cores do texto? Ilegível, de fato.
5. Exibir o destino dos links
Como o papel não é um meio interativo, os leitores não podem clicar nos links para coletar mais informações.
Digamos que alguém esteja lendo um impresso sobre um novo produto sofisticado. Vendo “Clique aqui para mais informações” de repente seria bastante irritante para eles, não seria? Isso é facilmente corrigido adicionando o destino do link após o próprio texto do link, dando a você algo parecido com isto: “Clique aqui para mais informações (http://hereismore.com/information).”
Além disso, para navegadores prontos para CSS 2, isso pode ser feito com CSS antigo. Aqui está o código:
[css] a: link: depois de {content: "(" attr (href) ")";} [/ css]Você pode apimentar as coisas com um tamanho de fonte menor, itálico ou qualquer outra coisa.
6. Faça Links se destacar do texto regular
Os leitores precisam ser capazes de distinguir links do texto normal. As regras básicas de usabilidade se aplicam aqui: azul e sublinhado é o preferido, mas eu prefiro adicionar negrito também.
Lembre-se de que os documentos geralmente são impressos em preto e branco. Não dependa apenas da diferença de cor. Aqui está o código para links impressos sensatos:
[css] a: link {font-weight: negrito; texto-decoração: sublinhado; cor: # 06c;} [/ css]# 0066cc é uma cor azul nova e parece # 999999 quando impressa em escala de cinza. Com isso, os links ficarão bem impressos em cores ou em preto e branco. Eles também se destacam do texto normal.
7. E quanto ao tamanho da fonte?
Na impressão, 12 pontos é o padrão. Mas como traduzimos isso para CSS? Alguns dizem que definir o tamanho da fonte para 12 pontos (pt) é bom o suficiente. Outros recomendam configurá-lo para 100%. Outros ainda dizem para não declarar qualquer tamanho de fonte na sua folha de estilo de impressão, porque isso substituiria as preferências do usuário.
Pessoalmente, eu vou com um tamanho de fonte de 12 pontos na maioria das vezes:
[css] p {font-size: 12pt;} [/ css]8. E sobre fontes?
A maioria das pessoas prefere fontes com serifa porque elas são menos cansativas para os olhos, elas melhor orientam o leitor através do texto e assim por diante. Configurando o font-family para serif em sua folha de estilo de impressão é provavelmente uma boa ideia, embora alguns leitores possam se surpreender ao descobrir que a fonte em sua impressão não é a mesma que a do seu site.
Aqui está o código para uma boa pilha de fontes de impressão:
[css] body {font-family: Geórgia, 'Times New Roman', serif;} [/ css]
Um dos benefícios da propriedade @ font-face do CSS 3 é que suas fontes especiais podem ser impressas também, fazendo com que as impressões pareçam muito mais com o seu site!
9. Meu Blog tem muitos comentários. O que devo fazer?
Bem, esta é realmente a sua escolha. Por um lado, pense em todas as árvores que você estaria salvando apenas adicionando #comments { display: none; } para a sua folha de estilo de impressão. Por outro lado, os comentários são de grande valor em alguns blogs e contêm uma grande discussão.
Ao mover os comentários para sua própria página, você dá aos usuários a opção de imprimi-los. CSS tem uma propriedade que torna isso muito fácil:
[css] #comments {page-break-before: sempre;} [/ css]Por exemplo, se seu artigo tiver duas páginas e meia, os comentários serão executados da página 4 até, digamos, 6. Os usuários poderão escolher quais páginas imprimir, sem perder nenhuma informação.
10. Mostrar uma mensagem somente para impressão
“ Obrigado por imprimir este artigo! Por favor, não esqueça de voltar a mysite.com para artigos novos. Por que não exibir uma mensagem amigável como essa na impressão? Ou talvez peça aos leitores para reciclar o papel que eles usaram para preservar o meio ambiente.
Aqui está o que isso seria:
Obrigado por imprimir este artigo. Por favor, não esqueça de voltar a mysite.com para artigos novos.
[css] #printMsg {display: block;} [/ css] Você pode adicionar um pouco de estilo também, como uma borda de 1 pixel. Não esqueça de adicionar #printMsg { display: none; } a sua folha de estilo regular, para evitar confundir os visitantes.
Mostruário
Aqui estão alguns exemplos de sites conhecidos que pensaram (ou esqueceram) sobre a folha de estilos de impressão. Sinta-se livre para ser inspirado.
Parece bom:
Aqui estão alguns sites que fazem um ótimo trabalho com suas folhas de estilo de impressão:
24 maneiras : O site para este "calendário do advento para geeks da web" tem um design extravagante, mas eu me perguntava como seria a impressão. O resultado é muito bom. O material CSS 3 foi removido. O layout é limpo e ainda assim liso. A grande marca foi removida, substituída por um simples "24 maneiras" alinhado à direita ao lado do título da postagem.
ThinkVitamin : O blog da Carsonified é um bom exemplo de como imprimir folhas de estilo. Não há pontos fracos reais, exceto que o destino da URL não é mostrado.
Truques CSS : Chris Coyier do CSS-Tricks.com fez um bom trabalho com sua folha de estilo de impressão. Ele removeu toda a desordem e moveu os comentários para uma nova página, para que os usuários pudessem optar por não imprimi-los.
Poderia usar algum trabalho
Aqui estão alguns sites que já são ótimos, mas cujas folhas de estilo de impressão podem usar um pouco de polimento. Sem ofensa a ninguém nesta seção.
Web Design Ledger : Webdesign Ledger parece ter negligenciado sua folha de estilo de impressão. Quando você clica em "Imprimir", você acaba com três páginas de anúncios e links relacionados.
O cubículo de design : Brian Hoff parece ter esquecido sua folha de estilo de impressão também. Quando você imprime um artigo, você também recebe o formulário de comentários.
Flickr : Ser capaz de imprimir fotos para mostrar aos amigos seria bom. O Flickr poderia ter removido tudo, exceto a imagem em si e as informações de direitos autorais em documentos impressos. Mas tudo aparece em HTML simples sem estilo.
Recursos
- Dicas úteis para criar uma folha de estilos CSS impressa por Line25
- Imprimir folha de estilo: o guia definitivo
- CSS Design: indo imprimir
- CSS-Tricks finalmente recebe uma folha de estilo de impressão
Escrito exclusivamente para WDD por Pieter Beulque. Ele é estudante e webdeveloper morando na Bélgica. Você pode segui-lo em Twitter também.