Atribut media <source> HTML
Definisi dan penggunaan
media Atribut menerima setiap media query yang biasanya didefinisikan dalam CSS.
Perhatian:Atribut ini dapat menerima beberapa nilai.
Contoh
Sebuah elemen <picture> yang mengandung dua berkas sumber dan gambar cadangan:
<picture> <source media="(min-width:650px)" srcset="flower-1.jpg"> <source media="(min-width:465px)" srcset="flower-2.jpg"> <img src="flower-3.jpg" alt="Flowers" style="width:auto;"> </picture>
Sintaks
<source media="media_query>
Operator yang mungkin
| Operator | Deskripsi |
|---|---|
| and | Tentukan operator AND. |
| not | Tentukan operator NOT. |
| , | Tentukan operator OR. |
Perangkat
| Nilai | Deskripsi |
|---|---|
| all | Default. Sesuai untuk semua perangkat. |
| aural | Perkakas sintesis suara. |
| braille | Alat umpan balik braille. |
| handheld | Perangkat tangga tangan (layar kecil, bandwidth terbatas). |
| projection | Proyektor. |
| Mode pratinjau cetak/page cetak. | |
| screen | Layar komputer. |
| tty | Teleprinter dan media yang menggunakan grid karakter lebar yang sama. |
| tv | Perangkat jenis TV (resolusi rendah, kemampuan halaman terbatas). |
Nilai
| Nilai | Deskripsi |
|---|---|
| width |
Tentukan lebar area tampilan target. Dapat menggunakan prefiks "min-" dan "max-". Contoh: media="screen and (min-width:500px)" |
| height |
Tentukan tinggi area tampilan target. Dapat menggunakan prefiks "min-" dan "max-". Contoh: media="screen and (max-height:700px)" |
| device-width |
Tentukan lebar papan layar/target kertas. Dapat menggunakan prefiks "min-" dan "max-". Contoh: media="screen and (device-width:500px)" |
| device-height |
Tentukan tinggi papan layar/target kertas. Dapat menggunakan prefiks "min-" dan "max-". Contoh: media="screen and (device-height:500px)" |
| orientation |
Tentukan arah papan layar/target kertas. Nilai yang mungkin: "portrait" atau "landscape" Contoh: media="all and (orientation: landscape)" |
| aspect-ratio |
Tentukan rasio lebar/tinggi area tampilan target. Dapat menggunakan prefiks "min-" dan "max-". Contoh: media="screen and (aspect-ratio:16/9)" |
| device-aspect-ratio |
Tentukan rasio device-width/device-height papan layar/target kertas. Dapat menggunakan prefiks "min-" dan "max-". Contoh: media="screen and (aspect-ratio:16/9)" |
| color |
Tentukan jumlah bit warna untuk setiap warna papan layar target. Dapat menggunakan prefiks "min-" dan "max-". Contoh: media="screen and (color:3)" |
| color-index |
Tentukan jumlah warna yang dapat ditangani papan layar target. Dapat menggunakan prefiks "min-" dan "max-". Contoh: media="screen and (min-color-index:256)" |
| monochrome |
Tentukan bit per pixel dalam frame buffer monokrom. Dapat menggunakan prefiks "min-" dan "max-". Contoh: media="screen and (monochrome:2)" |
| resolution |
Tentukan kepadatan piksel layar target/papir (dpi atau dpcm). Dapat menggunakan prefiks "min-" dan "max-". Contoh: media="print and (resolution:300dpi)" |
| scan |
Tentukan metode pemindaian layar TV. Nilai yang mungkin adalah: "progressive" dan "interlace". Contoh: media="tv and (scan:interlace)" |
| grid |
Tentukan apakah perangkat keluar adalah grid atau bitmap. Nilai yang mungkin: "1" untuk grid, "0" untuk lainnya. Contoh: media="handheld and (grid:1)" |
Dukungan Browser
Angka di tabel menunjukkan versi browser pertama yang mendukung atribut ini.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 38.0 | 9.0 | 15.0 | 9.1 | 25.0 |
