Geek Rants Por que tantos sites não usam folhas de estilo de impressão?

Nunca deixa de me surpreender que as pessoas tenham que procurar um link ou um botão que diz “Imprimir” em uma página da web, especialmente considerando que há uma tecnologia milagrosa que torna esse passo desnecessário. Infelizmente quase ninguém usa, mesmo que seja… 10 anos de idade.

Não é apenas bobagem exigir uma etapa extra para impressão, mas o uso de folhas de estilo de impressão economizaria alguma tinta para qualquer pessoa que não usasse o link imprimível. E, claro, há muitas pessoas que usam impressão em PDF para salvar artigos para mais tarde sem desperdiçar papel..

Quais são as folhas de estilo de impressão?

A maioria dos sites da Web implementa sua função de impressão, levando você para outra página, que é formatada de maneira diferente para impressoras - mas isso não é realmente necessário. Cada navegador implementa uma tecnologia CSS simples conhecida como Print Stylesheets, que nada mais é do que um arquivo que especifica elementos a serem ocultados quando o navegador imprime a página..

Para aqueles que não estão familiarizados, CSS significa Cascading Style Sheets, e é como o seu navegador sabe como formatar o código-fonte HTML de uma página da Web para o que você realmente vê na tela. Tudo, desde fontes, cores, bordas e até imagens de fundo, pode ser especificado na folha de estilo.

Adicionar uma folha de estilo de impressão é tão simples quanto conectar essa única linha à sua página. HTML-the media = print parte do código diz ao navegador para usar somente esta folha de estilo ao imprimir.

Este arquivo geralmente se parece com algo assim:

#sidebar, #footer, #navigation, #sharinglinks, #topad, #comments display: none

Sim, é tão simples assim. Então, como isso funciona? Veja um exemplo de uma página da Web normal à esquerda, com toda a navegação, logotipo e anúncios claramente visíveis com o ID associado - e à direita, a mesma página com a folha de estilo de impressão aplicada, ocultando todos esses elementos.

Obviamente você prefere imprimir um destes sobre o outro, certo?

Exemplos de falha da folha de estilo de impressão

Infelizmente, há apenas um monte de sites enormes que não se preocuparam em implementar isso. Dê uma olhada no que acontece quando você tenta imprimir no New York Times:

Alguns sites, como a rede de sites Gawker, são ainda piores. Não só eles não têm uma visão imprimível, quando você tenta e imprime, se assemelha a sopa de tinta. Até onde podemos dizer, não há como imprimir em um site da Gawker sem usar um serviço separado como o Readability, ou destacar manualmente o conteúdo da página, o que é quase impossível em seu novo design..

É triste mesmo. Cargas dos maiores sites simplesmente não conseguem se preocupar em implementar esse recurso.

Felizmente, alguns sites os usam

Aqui está um exemplo de uma visualização imprimível formatada corretamente - sem ter que se preocupar em encontrar algum link de impressão. O site da BBC News formata os artigos para impressão com um cabeçalho personalizado. Eles incluem comentários na visualização de impressão, mas ainda é um trabalho bem feito.

Existem muitos outros sites que fazem o mesmo, como o ArsTechnica e… o nosso site, mas seria ridículo mostrar screenshots de todos eles. Em nossa pesquisa, os sites que os implementaram adequadamente são poucos e distantes.

Então, para finalizar… por favor, leve os 5 minutos necessários para implementar uma folha de estilo de impressão para o seu site!