Tutorial Belajar CSS Bagian 18 : Cara Menggunakan Media Types di CSS

0
586

Pada tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar CSS Bagian 17 : Cara Menggunakan Properti @ Rules di CSS. Selanjutnya, kita akan mempelajari cara menggunakan media types di CSS untuk mengatur tampilan dokumen berdasarkan perangkat yang digunakan untuk membuka website.

Salah satu fitur terpenting dari style sheet adalah bahwa CSS menentukan bagaimana dokumen akan disajikan pada media yang berbeda: di layar, di atas kertas, dengan penyintesis ucapan, dengan perangkat braille, dll.

Di sini, kita akan meliha 2 cara untuk menentukan style CSS tergantung media yang digunakan :

  • Tentukan media target dari style sheet dengan @media atau @import at-rules.
  • Tentukan media target dalam bahasa dokumen.

Aturan @media

Aturan @media menentukan jenis media target (dipisahkan dengan koma) dari sekumpulan aturan.

Berikut contoh penggunaan :

<style tyle = "text/css">
   <!--
      @media print {
         body { font-size: 10pt }
      }
	
      @media screen {
         body { font-size: 12pt }
      }
      @media screen, print {
         body { line-height: 1.2 }
      }
   -->
</style>

Bahasa Dokumen

Di HTML 4.0, atribut media pada elemen LINK menentukan media target dari style sheet eksternal.

Berikut ini contohnya :

<style tyle = "text/css">
   <!--
      <!doctype html public "-//w3c//dtd html 4.0//id>
      <html>
         <head>
            <title>link to a target medium</title>
            <link rel = "stylesheet" type = "text/css" media = "print, 
               handheld" href = "foo.css">
         </head>

         <body>
            <p>isi dari website...
         </body>
      </html>
   -->
</style>

Jenis Media yang Dikenali

Nama yang dipilih untuk jenis media CSS mencerminkan perangkat target untuk menampilkan style dokumen.

Jenis media ini memberikan gambaran tentang perangkat apa yang dimaksud dengan jenis media tersebut. Berikut daftar berbagai jenis media yang digunakan :

No.Nilai & Deskripsi
1all
Cocok untuk semua perangkat.
2aural
Ditujukan untuk penyintesis ucapan.
3braille
Ditujukan untuk perangkat yang digunakan oleh tuna netra dengan menggunakan sentuhan braille.
4embossed
Ditujukan untuk printer braille berhalaman.
5handheld
Ditujukan untuk perangkat genggam (biasanya layar kecil, monokrom, bandwidth terbatas).
6print
Ditujukan untuk bahan cetakan, buram dan untuk dokumen yang dilihat di layar dalam mode pratinjau cetak.
7proyeksi
Ditujukan untuk presentasi dalam bentuk proyeksi dokumen, misalnya proyektor atau mencetak ke transparansi.
8screen
Ditujukan terutama untuk layar komputer berwarna.
9tty
Ditujukan untuk media yang menggunakan perangkat seperti teletipe, terminal, atau perangkat portabel dengan kemampuan tampilan terbatas.
10tv
Ditujukan untuk perangkat jenis televisi seperti smart tv.

CATATAN – penggunaan nama jenis media tidak membedakan huruf besar dan kecil (case-insensitive).

Semoga tutorial ini membantu Anda untuk mempelajari cara menggunakan media types di CSS untuk menentukan style dokumen berdasarkan perangkat yang digunakan.

TINGGALKAN KOMENTAR

Silakan masukkan komentar anda!
Silakan masukkan nama Anda di sini

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.