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 **

Komentar

Halaman Lainya

  • Membuat header tetap diatas halaman
    Banyak variasi tampilan header atau footer yang digunakan untuk menghiasi halaman web dan dapat kita temukan diinternet, mulai dari yang sekedar tulisan judul, gambar logo sampai dengan model otomatis muncul dan hilang. Pada tulisan berikut ini, saya akan berbagi trick cara membuat header dan footer yang tetap diatas dan dibawah bagian halaman.
  • Template halaman admin gratis
    Setiap kali kita membuat sebuah aplikasi web tentunya pasti menginginkan hasil yang baik, enak dilihat, tampilan yang cepat, fleksibel dan gampang untuk dikembangkan. Dan satu lagi tentunya lagi hemat waktu dalam membuatnya.
  • Membuat Background motif unik dengan CSS3
    Barusan habis jalan-jalan ke situs seberang, ketemu tutorial membuat motif gambar background yang sangat unik dibuat cuma dengan css3. Memang luar biasa tak pernah terbayangkan kalau hasilnya bisa mirip dengan sebuah gambar yang dibuat dengan aplikasi seperti photoshop.
  • Membuat form login dengan css
    Membuat form login dengan css tidaklah susah hanya perlu beberapa menit untuk menyusun kode cssnya karena isian form yang dibuat hanya username, password dan tombol loginya. Beda kalau kita membuat form dengan css untuk keperluan yang lengkap seperti form
  • Membuat efek gambar dengan css
    CSS memiliki kemampuan efek khusus yang bisa digunakan untuk memperindah tampilan web atau blog. Selain bisa kita terapkan pada objek-objek tulisan, tabel, dan list kita juga bisa gunakan untuk mengatur tampilan gambar.

Kiriman terbaru