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