Cara mengatur tampilan dengan css sesuai dengan media outputnya

Cara mengatur tampilan dengan css sesuai dengan media outputnya

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>