Contoh
Tentukan gaya yang akan digunakan untuk cetak:
<style media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style> Cobalah sendiri " Definisi dan Penggunaan
The media atribut menentukan apa yang media / perangkat gaya CSS dioptimalkan untuk.
Atribut ini digunakan untuk menentukan bahwa gaya adalah untuk perangkat khusus (seperti iPhone), pembicaraan atau media cetak.
Tip: Atribut ini dapat menerima beberapa nilai.
Dukungan Browser
| Atribut | |||||
|---|---|---|---|---|---|
| media | iya nih | iya nih | iya nih | iya nih | iya nih |
Perbedaan Antara HTML 4.01 dan HTML5
NONE.
Sintaksis
<style media="value">
kemungkinan Operators
| Nilai | Deskripsi |
|---|---|
| and | Menentukan operator AND |
| not | Menentukan operator NOT |
| , | Menentukan operator OR |
perangkat
| Nilai | Deskripsi |
|---|---|
| all | Default. Cocok untuk semua perangkat |
| aural | synthesizer pidato |
| braille | perangkat umpan balik braille |
| handheld | perangkat genggam (layar kecil, bandwidth terbatas) |
| projection | proyektor |
| Pratinjau cetak modus / halaman yang dicetak | |
| screen | layar komputer |
| tty | Teletypes dan media yang sama menggunakan karakter jaringan fixed-pitch |
| tv | Jenis televisi perangkat (resolusi rendah, kemampuan gulir terbatas) |
Nilai
| Nilai | Deskripsi |
|---|---|
| lebar | Menentukan lebar area layar yang ditargetkan. "min-" dan "max-" awalan dapat digunakan. Contoh: media="screen and (min-width:500px)" |
| tinggi | Menentukan ketinggian area tampilan yang ditargetkan. "min-" dan "max-" awalan dapat digunakan. Contoh: media="screen and (max-height:700px)" |
| perangkat-lebar | Menentukan lebar target display / kertas. "min-" dan "max-" awalan dapat digunakan. Contoh: media="screen and (device-width:500px)" |
| perangkat-height | Menentukan tinggi dari target display / kertas. "min-" dan "max-" awalan dapat digunakan. Contoh: media="screen and (device-height:500px)" |
| orientasi | Menentukan orientasi target display / kertas. Kemungkinan nilai: "portrait" atau "landscape" Contoh: media="all and (orientation: landscape)" |
| aspek-rasio | Menentukan rasio lebar / tinggi dari area tampilan yang ditargetkan. "min-" dan "max-" awalan dapat digunakan. Contoh: media="screen and (aspect-ratio:16/9)" |
| perangkat-aspek-rasio | Menentukan rasio perangkat-lebar / perangkat-tinggi dari target display / kertas. "min-" dan "max-" awalan dapat digunakan. Contoh: media="screen and (aspect-ratio:16/9)" |
| warna | Menentukan bit per warna layar sasaran. "min-" dan "max-" awalan dapat digunakan. Contoh: media="screen and (color:3)" |
| Warna-index | Menentukan jumlah warna tampilan sasaran dapat menangani. "min-" dan "max-" awalan dapat digunakan. Contoh: media="screen and (min-color-index:256)" |
| satu warna | Menentukan bit per pixel dalam frame buffer monokrom. "min-" dan "max-" awalan dapat digunakan. Contoh: media="screen and (monochrome:2)" |
| resolusi | Menentukan kepadatan pixel (dpi atau dpcm) dari target display / kertas. "min-" dan "max-" awalan dapat digunakan. Contoh: media="print and (resolution:300dpi)" |
| Pindai | Menentukan metode pemindaian dari layar tv. Nilai yang mungkin adalah "progresif" dan "interlace". Contoh: media="tv and (scan:interlace)" |
| kisi | Menentukan jika perangkat output jaringan atau bitmap. Nilai yang mungkin adalah "1" untuk grid, dan "0" jika tidak. Contoh: media="handheld and (grid:1)" |