Properti media <link> HTML
Definisi dan penggunaan
media Properti ini menentukan optimasi sumber daya yang dituju untuk media/permukaan yang mana.
media Properti ini menentukan tempat yang akan ditampilkan dokumen yang dihubungkan.
Properti ini utamanya digunakan bersama dengan gaya CSS, untuk menentukan gaya yang berbeda untuk jenis media yang berbeda.
media Properti ini dapat menerima beberapa nilai.
Contoh
Dua jenis gaya yang berbeda untuk dua jenis media yang berbeda (layar dan cetak):
<head> <link rel="stylesheet" type="text/css" href="theme.css"> <link rel="stylesheet" type="text/css" href="print.css" media="print"> </head>
Sintaks
<link media="nilai>
Operator yang mungkin
| Operator | Deskripsi |
|---|---|
| and | Tentukan operator AND. |
| not | Tentukan operator NOT. |
| , | Tentukan operator OR. |
Perangkat
| Perangkat | Deskripsi |
|---|---|
| all | Baku. Dipakai untuk semua jenis perangkat media. |
| Dipakai untuk mode pratinjau cetak/pagina cetak. | |
| screen | Dipakai untuk layar komputer, tablet, ponsel cerdas, dll. |
| speech | Dipakai untuk penjelangganan layar bacaan. |
| aural | Ditinggalkan.Perangkat sintesis suara. |
| braille | Ditinggalkan.Perangkat umpan balik braille. |
| handheld | Ditinggalkan.Perangkat tangki (layar kecil, bandwidth terbatas). |
| projection | Ditinggalkan.Proyektor. |
| tty | Ditinggalkan.Dipakai untuk teletypewriter dan media yang serupa dengan grid间距 karakter tetap. |
| tv | Ditinggalkan.Perangkat jenis TV (resolusi rendah, kemampuan gerakan terbatas). |
Nilai
| Nilai | Deskripsi |
|---|---|
| aspect-ratio |
Tentukan rasio lebar/tinggi area tampilan target. Dapat digunakan prefix "min-" dan "max-". Contoh: media="screen and (aspect-ratio:16/9)" |
| color |
Tentukan jumlah bit per warna monitor target. Dapat digunakan prefix "min-" dan "max-". Contoh: media="screen and (color:3)" |
| color-index |
Tentukan jumlah warna yang dapat digunakan monitor target. Dapat digunakan prefix "min-" dan "max-". Contoh: media="screen and (min-color-index:256)" |
| device-aspect-ratio | Ditinggalkan.Tentukan rasio device-width/device-height monitor/papir target. |
| device-width | Ditinggalkan.Tentukan lebar monitor/papir target. |
| device-height | Ditinggalkan.Tentukan tinggi monitor/papir target. |
| grid |
Tentukan apakah perangkat keluar adalah kisi atau bitmap. Nilai yang mungkin: "1" untuk kisi, "0" untuk lainnya. Contoh: media="handheld and (grid:1)" |
| height |
Tentukan tinggi area tampilan target. Dapat digunakan prefix "min-" dan "max-". Contoh: media="screen and (max-height:700px)" |
| monochrome |
Tentukan setiap bit per pixel di frame buffer warna tunggal. Dapat digunakan prefix "min-" dan "max-". Contoh: media="screen and (monochrome:2)" |
| orientation |
Tentukan arah layar monitor/papir target. Nilai yang mungkin adalah: "portrait" atau "landscape". Contoh: media="all and (orientation: landscape)" |
| resolution |
Tentukan kepadatan piksel layar monitor/papir target (dpi atau dpcm). Dapat digunakan prefix "min-" dan "max-". Contoh: media="print and (resolution:300dpi)" |
| scan |
Tentukan metode pemindai layar TV. Nilai yang mungkin adalah: "progressive" dan "interlace". Contoh: media="tv and (scan:interlace)" |
| width |
Tentukan lebar area tampilan target. Dapat digunakan prefix "min-" dan "max-". Contoh: media="screen and (min-width:500px)" |
Dukungan browser
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Dukungan | Dukungan | Dukungan | Dukungan | Dukungan |
