Bedakan antara Media Screen dan Print - CSS

Dalam penggunaan kode CSS idealnya kita mesti membedakan antara @media screen dengan @media print (dan juga handheld*), atau dengan kata lain, kita mesti membedakan antara tampilan weblog kita di layar monitor dengan hasil cetak ('print out').

Coba anda lakukan 'print preview' pada file di browser. Kalau blog ini sebelumnya tampilannya berantakan. Tapi bukan sekedar berantakan yang perlu diperhatikan tapi hasil cetakannya yang mesti 'friendly'.

Cetakan pada media @print mestinya lebih sederhana, lebih mengutamakan konten, jadi beberapa hal yang berbau pernak pernik seperti 'slide show', 'adsense', dll semestinya tidak perlu ditampilkan ketika di print. Secara garis besar tampilan hasil printnya adalah:

Background: putih,
text: hitam,
link: biru dan garis bawah.

body {color : #000000; background : #ffffff; font-family : "Times New Roman", Times, serif; font-size : 12pt;} 

a {text-decoration : underline; color : #0000ff;}

lebih lengkapnya lihat: CSS Media Types Create Print-Friendly Pages

Pada kasus blog ini, saya menggunakan media print seperti ini:

@media print{

body {color : #000000; background : #ffffff; font-family : "Times New Roman", Times, serif; font-size: 12pt} 
  a { text-decoration : underline; color : #0000ff}
  h1 {font-size:32pt}
  h2 {font-size:18pt}
  .post-title {font-size:14pt; font-weight:bold}
  .post-footer, .comment-timestamp {font-size:10pt; padding:5px 0 10px;}
nav, aside, #goingtop, .comment-form {visibility: hidden}

}

Cukup sederhana, jadi saya mengurangi ukuran font pada judul dan menghilangkan navigasi, sidebar dan lainya yang tidak perlu.

Selanjutnya saya menambahkan media screen pada elemen lainnya supaya bisa dibedakan mana yang print dan screen, seperti contoh berikut:

@media screen{

body {background-color:#333333; color:#FFF; text-shadow: 0 1px 2px #000; font-family: Verdana, "Bitstream Vera Sans", sans-serif;   font-size: 62.5%}
a:link, a:visited  {color:#FFF;  text-decoration:none;}
a:hover {color:#C3C3C3; text-decoration:none}
a:active {color:#999}
a img { border-width:0}

} 

Gambar dibawah ini adalah hasil dari media print blog ini, jika kita lihat di browser dengan file > print priview.



---
* Nah untuk masalah media 'handheld' ini yang saya belum pasang karena ngak ada alat ngeceknya, mungkin bisa ada yang share, dan mudah2 Dani bisa memberi penjelasan lebih jauh penggunaan media@handheld :).

Posted in: CSS / HTML,Tutorial