10Aug

Geek Rants: por que tantos sites da Web não usam folhas de estilos de impressão?

click fraud protection

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

Não só é bobo exigir um passo extra para a impressão, mas usar folhas de estilos de impressão economizaria pouca tinta para qualquer pessoa que não use o link para impressão. E, claro, há muitas pessoas que usam impressão em PDF para salvar artigos para mais tarde, sem desperdiçar papel.

O que são folhas de estilos de impressão?

A maioria dos sites implementa sua função de impressão, levando você a outra página, que está formatada de forma diferente para impressoras - mas isso realmente não é necessário. Todo navegador implementa uma tecnologia CSS simples conhecida como folhas de estilos de impressão, que não é mais do que um arquivo que especifica elementos a esconder quando seu navegador imprime a página.

instagram viewer

Para aqueles que não são familiares, o CSS significa folhas de estilo em cascata, e é como seu navegador sabe como formatar o código-fonte HTML para uma página da web no que você realmente vê na tela. Tudo a partir de fontes, cores, bordas e até mesmo imagens de fundo pode ser especificado na folha de estilo.

Adicionando uma folha de estilos de impressão é tão simples como conectar esta única linha à sua página HTML - a mídia = imprimir parte do código informa ao navegador para usar apenas esta folha de estilo ao imprimir.

& lt; link rel = "stylesheet" href = "print.css" type = "text / css" media = "print" & gt;

Este arquivo geralmente se parece com isto:

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

Sim, é realmente tão simples quanto isso. Então, como isso funciona? Aqui está 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 estilos de impressão aplicada, escondendo todos esses elementos.

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

Exemplos de falha de folha de impressão

Infelizmente, existem apenas muitos sites enormes que não se preocuparam em implementar isso. Dê uma olhada no que acontece quando tenta imprimir no New York Times:

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

É triste, realmente. Cargas dos maiores sites simplesmente não conseguem incomodar implementar esse recurso.

Felizmente, alguns sites usá-los

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

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

Então, para encerrar. .., pegue os 5 minutos necessários para implementar uma folha de estilo de impressão para o seu site!