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 efek kotak tulisan dengan css
    Panduan Cara Membuat efek kotak tulisan dengan css
  • 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.
  • Cara Membagi halaman hasil cetak printer dengan css
    Jika kita mencetak sebuah halaman web yang isinya panjang, biasanya hasil cetaknya bersambung menjadi beberapa halaman yang tidak pasti bagian-bagianya. Bisa saja satu halaman terdiri dari beberapa bagian bahasan atau format yang berbeda sehingga menyulit

Kiriman terbaru