CSS de impressão no fechaTag

Acabo de criar um CSS de impressão para este blog. Levei uns dez minutos.

O código ficou assim:

form,#sidebar,iframe,#otop,#respond,.navigation,.rec6,.linkk{
display:none;
}
h2{
margin:0;
}
.entry{
line-height: 150%;
}
#header h1{
margin:0;
padding:0;
font-size:24px;
}
#header .description{
padding:0;
}
h2{
padding:40px 0 0;
margin:0;
}

E o resultado:

Em suma: você esconde tudo o que não pode ser usado ou não faz sentido no papel (menus, formulários, etc.) e tenta não atrapalhar o usuário. Aliás, não dá para fazer muito mais do que isso. Os mecanismos de impressão dos navegadores foram feitos para simplificar as páginas e economizar tinta.

Fácil, não?

Publicado por

Elcio

Elcio é sócio fundador da Visie Padrões Web. Pioneiro no uso e divulgação dos padrões do W3C no Brasil, Elcio já treinou equipes de dezenas de empresas como Globo.com, Terra, Petrobras, iG e Locaweb. Além disso, tem dirigido as equipes da Visie no desenvolvimento de projetos web para marcas como Brastemp, Itaú Unibanco, Johnson & Johnson e Rede Globo.

15 comentários em “CSS de impressão no fechaTag”

  1. Mandei imprimir para arquivo aqui e não funcionou, olhei no código da página e também não existe CSS para impressão.
    Outra coisa, não seria melhor usar pt (points) ao invés de px (pixel)?

    Até mais.

  2. Talvez eu só tirasse o visual dos links, ou seja, cor azul e o sublinhado…

    Outra questão estaria na unidade utilizada para as fontes, pois acho mais ‘seguro’ utilizar “pt” mesmo, já que o tamanho em pixels pode variar no resultado da impressão… Utilizando pontos nós temos certeza do modo pelo qual será impresso 🙂

  3. nossa, não sabia que tão poucas pessoas sabiam desse esquema de CSS para impressão…..

    enfim, todo Site tem de ter 2 coisas fundamentais: CSS para apresentação e CSS para impressão 🙂

    Agora sim seu site tem os dois!! abraço

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *