HTML <source> medya özelliği
Tanım ve Kullanım
media Özellik, CSS'te tanımlanan herhangi bir geçerli medya sorgusunu kabul eder.
Dikkat:Bu özellik birden fazla değer kabul edebilir.
Örnek
İki kaynak dosyası ve bir yedek görsel içeren <picture> ögesi:
<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>
gramer
<source media="media_query>
muhtemel işleçler
| işleçler | tanım |
|---|---|
| and | AND işleci belirler. |
| not | NOT işleci belirler. |
| , | OR işleci belirler. |
cihaz
| değer | tanım |
|---|---|
| all | varsayılan. Tüm cihazlar için uygundur. |
| aural | ses sentezleyici. |
| braille | braille geri bildirim cihazı. |
| handheld | elle tutulan cihazlar (küçük ekran, sınırlı bant genişliği). |
| projection | proyeksiyon cihazı. |
| yazıcı önizleme modu/yazıcı sayfası. | |
| screen | bilgisayar ekranı. |
| tty | telegraph typewriter ve geniş karakter ağırlıklı benzer medyalar. |
| tv | televizyon türü cihazlar (düşük çözünürlük, sınırlı sayfa sayma yeteneği). |
değer
| değer | tanım |
|---|---|
| width |
hedef gösterim alanının genişliğini belirler. min- ve max- önekleri kullanılabilir. örnek: media="screen and (min-width:500px)" |
| height |
hedef gösterim alanının yüksekliğini belirler. min- ve max- önekleri kullanılabilir. örnek: media="screen and (max-height:700px)" |
| device-width |
hedef ekran/papuğun genişliğini belirler. min- ve max- önekleri kullanılabilir. örnek: media="screen and (device-width:500px)" |
| device-height |
hedef ekran/papuğun yüksekliğini belirler. min- ve max- önekleri kullanılabilir. örnek: media="screen and (device-height:500px)" |
| orientation |
hedef ekran/papuğun yönünü belirler. muhtemel değerler: "portrait" veya "landscape" örnek: media="all and (orientation: landscape)" |
| aspect-ratio |
hedef gösterim alanının genişlik/yükseklik oranını belirler. min- ve max- önekleri kullanılabilir. örnek: media="screen and (aspect-ratio:16/9)" |
| device-aspect-ratio |
hedef ekran/papuğun device-width/device-height oranını belirler. min- ve max- önekleri kullanılabilir. örnek: media="screen and (aspect-ratio:16/9)" |
| color |
hedef ekranın her renginin bit sayısını belirler. min- ve max- önekleri kullanılabilir. örnek: media="screen and (color:3)" |
| color-index |
hedef ekranın işleyebileceği renk sayısını belirler. min- ve max- önekleri kullanılabilir. örnek: media="screen and (min-color-index:256)" |
| monochrome |
Tek renk kare hatırlıklarındaki her piksel bitini belirtir. min- ve max- önekleri kullanılabilir. Örnek: media="screen and (monochrome:2)" |
| resolution |
Hedef ekran/papuğun piksel yoğunluğunu (dpi veya dpcm) belirtir. min- ve max- önekleri kullanılabilir. Örnek: media="print and (resolution:300dpi)" |
| scan |
TV ekranının tarayım yöntemini belirtir. Mümkün olan değerler: "progressive" ve "interlace". Örnek: media="tv and (scan:interlace)" |
| grid |
Çıktı cihazının ağ demesi veya bit haritası olup olmadığını belirtir. Mümkün olan değerler: "1" ağ demektir, "0" diğerleridir. Örnek: media="handheld and (grid:1)" |
Tarayıcı Desteği
Tablodaki numaralar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 38.0 | 9.0 | 15.0 | 9.1 | 25.0 |
