Contoh
Dua style sheet 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>
Cobalah sendiri " Definisi dan Penggunaan
The media atribut menentukan apa yang media / perangkat sumber daya target dioptimalkan untuk.
Atribut ini sebagian besar digunakan dengan stylesheet CSS untuk menentukan gaya yang berbeda untuk jenis media yang berbeda.
The media atribut 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
The media atribut sekarang mendukung nilai-nilai lebih.
Sintaksis
<link 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 |
|---|---|
| width | Menentukan lebar area layar yang ditargetkan. "min-" dan "max-" awalan dapat digunakan. Contoh: media="screen and (min-width:500px)" |
| height | Menentukan ketinggian area tampilan yang ditargetkan. "min-" dan "max-" awalan dapat digunakan. Contoh: media="screen and (max-height:700px)" |
| device-width | Menentukan lebar target display / kertas. "min-" dan "max-" awalan dapat digunakan. Contoh: media="screen and (device-width:500px)" |
| device-height | Menentukan tinggi dari target display / kertas. "min-" dan "max-" awalan dapat digunakan. Contoh: media="screen and (device-height:500px)" |
| orientation | Menentukan orientasi target display / kertas. Kemungkinan nilai: "portrait" atau "landscape" Contoh: media="all and (orientation: landscape)" |
| aspect-ratio | Menentukan rasio lebar / tinggi dari area tampilan yang ditargetkan. "min-" dan "max-" awalan dapat digunakan. Contoh: media="screen and (aspect-ratio:16/9)" |
| device-aspect-ratio | Menentukan rasio perangkat-lebar / perangkat-tinggi dari target display / kertas. "min-" dan "max-" awalan dapat digunakan. Contoh: media="screen and (aspect-ratio:16/9)" |
| color | Menentukan bit per warna layar sasaran. "min-" dan "max-" awalan dapat digunakan. Contoh: media="screen and (color:3)" |
| color-index | Menentukan jumlah warna tampilan sasaran dapat menangani. "min-" dan "max-" awalan dapat digunakan. Contoh: media="screen and (min-color-index:256)" |
| monochrome | Menentukan bit per pixel dalam frame buffer monokrom. "min-" dan "max-" awalan dapat digunakan. Contoh: media="screen and (monochrome:2)" |
| resolution | Menentukan kepadatan pixel (dpi atau dpcm) dari target display / kertas. "min-" dan "max-" awalan dapat digunakan. Contoh: media="print and (resolution:300dpi)" |
| scan | Menentukan metode pemindaian dari layar tv. Nilai yang mungkin adalah "progressive" dan "interlace" . Contoh: media="tv and (scan:interlace)" |
| grid | Menentukan jika perangkat output jaringan atau bitmap. Nilai yang mungkin adalah "1" untuk grid, dan "0" jika tidak. Contoh: media="handheld and (grid:1)" |