A dias atrás escrevi uma matéria falando de material de estudo sobre padrões web em português . Lendo a apostila criada pelo e-gov, tem um tópico com esse título.
Mas o que é uma “impressão amigável”?
Impressão amigável, é definir um css só para o usuário imprimir o conteúdo.
Quando mandamos imprimir uma página, estamos interessados somente no conteúdo. A página de impressão não deve vir com menu, cabeçalho, rodapé, banner, background do site, ilustrações enormes, etc etc… e é possível retirar esses elementos na hora do impressão com um css a parte.
Não é dificil, no tidbits nós usamos um template pronto de wordpress (que naturalmente, veio sem um css de impressão) e pra colocar eu criar um, não demorou nem 10 minutos.
O uso de folhas de estilo para equipamentos específicos é feito através do atributo media, existem vários tipos de media, mas na prática somente 3 tipos são usados, veja a relação abaixo de medias e dispositivos:
- all – todos os tipos de dispositivos;
- screen – computadores;
- print – impressoras;
- handheld – PDAs, mobiles palmtops;
Existem duas formas de escrever um atributo media que é colocado sempre dentro do <head> é claro:
Chamada externa:
<link media=“screen” type="text/css" href="style.css" rel="stylesheet"/>
<link media=“print” type="text/css" href="print.css" rel="stylesheet" />
<!-- ou assim pra quem prefere com import !-->
<style type="text/css">
@import url("style.css") screen;
@import url("print.css") print;
</style>
Repare que chamamos um css pra tela e um pra impressão.
Quando o atributo media não é declarado o padrão é media=”all”.
ou no css:
@media screen {
h1 { font-size:28px; color:#ff0;}
}
@media print {
h1 { font-size:14px; color:#000;}
}
Basicamente é bem rápido, não é necessário mexer em muitas tags, veja o que foi necessário para implementar aqui no tidbits:
@media print {
div#header, div#footer, div#sidebar-wrapper,
p.bookmark-me, div.post-footer,
form#commentform, h3.comentar {
display:none;
}
}
Danilo é programador interface da AgênciaClick, corinthiano, vegan e geek. Gasta suas horas com xadrez, poker, vendo futebol e esporadicamente dedica 5 minutos semanais à Belinha - mas é mto provável que esse tempo agora seja dividido com o TidBits... Danilo sabe php, rails, javascript, xhtml, css, jquery, webstandards, seo, sql, opensocial, etc. E já fez sites para espn, fiat, fila, umbro, fgv, gatorade, petrobras, etc. Veja o 
Belinha agora é arquiteta de informação na RMG Connect, está cozinhando melhor, mas postando cada dia menos... ainda assim, sempre que dá aparece aqui no TidBits para dar seus pitacos sobre desenvolvimento... (Belinha é casada com o Danilo)
November 13th, 2008 at 9:38 pm
Muito legal seu post. Só um toque, lá nas folhas de estilos externas, você colocou as 2 chamadas com o atributo media igual. O print.css está com o media “screen” também. Abraços.
December 17th, 2008 at 9:04 am
gostei…nunca tinha pensado nisso…eu tinha o trabalho de copiar e enviar para o word..kkk
bjkas