Cara mengatur tampilan dengan css sesuai dengan media outputnya

memilih media untuk CSS

Perkembangan teknologi web sekarang ini memungkinkan kita mengatur hasil output ke banyak media dengan berbagai macam bentuk tampilan. Bisa sesuai aslinya, bahkan bisa dengan format tampilan tertentu sesuai dengan media yang kita inginkan.

Untuk melakukan itu kita bisa memanfaatkan teknologi css. Perlu anda ketahui bahwa css bukan hanya digunakan untuk mengatur tampilan dilayar tapi juga bisa digunakan untuk mengatur tampilan ke berbagai media. Berikut ini media yang didukung oleh css :

  1. all : berlaku untuk semua media artinya css akan mengatur otomatis tampilan sesuai dengan media yang digunakan untuk menampilkanya
  2. aural : digunakan untuk media yang mendukung suara
  3. braille  : dugunakan untuk perangkat bantu tulisan braille (untuk orang buta)
  4. embossed  : digunakan untuk mencetak ke printer braille
  5. handheld  : digunakan untuk perangkat kecil
  6. print : digunakan untuk printer
  7. projection  : digunakan untuk layar proyektor
  8. screen  : digunakan untuk layar monitor
  9. tty : digunakan untuk terminal atau teletype
  10. tv : digunakan untuk tv

dari pilihan media yang sudah didukung css tersebut memang yang paling sering digunakan yaitu all, print, dan screen. Termasuk saya pribadi. Penggunaan salah satu pilihan yang tepat memang akan lebih optimal hasilnya, misal jika memang hanya untuk print saja sebaiknya gunakan media print. Kembali ke si pembuat mau dioutputkan kemana hasilnya, sebaiknya gunakan salah satunya.

Jika sudah ditetapkan media outputnya, tinggal kita deklarasikan css bada bagian dokumenya. Misal untuk keperluan tampilan ke layar monitor kita gunakan media screen. Caranya lihat kode berikut :

<link rel="stylesheet" type="text/css" href="namafile.css" media="screen" />

Kode diatas digunakan jika menggunakan file css ekternal yang terpisah dengan dokumennya. Jika cssnya digabung dalam dokumennya cara penggunaannya seperti berikut :

<style type="text/css" media="screen">
  kode css disini
</style>

Semoga bermanfaat

Zainal Hakim

** Bebas disunting dengan menyebutkan sumber **

Artikel Lainnya

  • Membuat background gradient dengan css3
    Salah satu fitur unggulan yang dihadirkan pada teknologi css3 adalah kemampuanya membuat warna latar/background gradient. Gradient adalah perubahan warna dari satu warna ke warna lainya yang dilakukan secara teratur. Gradient lebih identik pada hasil gambar yang diciptakan melalui proses penempatan kombinasi beberapa warna yang memenuhi sebuah area gambar. Biasanya untuk menghasilkan gambar gradient digunakan aplikasi pengolah gambar seperti photoshop, atau corel draw. Pada artikel ini saya akan berbagi tentang bagaimana membuat latar gradient dengan css3.
  • Membuat header table pada tiap halaman cetak
    Format cetak laporan yang baik tentunya sangatlah penting dalam membuat sebuah aplikasi berbasi web. Biasanya laporan yang menampilkan banyak record disajikan dalam bentuk tabel dengan judul kolom berbeda.
  • Membuat halaman web dengan latar background bintang dengan css
    Website atau halaman web biasanya dibuat semenarik mungkin, bisa dengan menggunakan gambar, tulisan, animasi ataupun dengan hiasan objek lainnya. Berikut ini saya akan berbagi tentang bagaimana membuat halaman web dengan latar atau background bintang dengan perintah CSS
  • 147 Nama warna dalam css
    Sebelumnya saya menulis tentang 6 cara penulisan warna dalam css. Pada tulisan ini saya berbagi tentang 147 nama warna yang bisa anda gunakan dalam css. Nama-nama warna ini sering dikatakan sebagai keyword yang merujuk pada warna tertentu yang hampir didukung oleh semua browser yang ada sekarang.
  • Kenapa menggunakan css (Cascading Style Sheets)
    CSS sudah tidak asing lagi dikalangan para blogger atau pengembang website karena css sangat mudah digunakan dan cara penulisannya pun sangat gampang diingat. Tapi tahukah anda masih banyak lagi alasan kenapa css menjadi idola para blogger dan pengembang? Dalam artikel ini saya akan mengemukaan alasan-alasan kenapa menggunakan css.

Kiriman terbaru