Media özniteliği

HTML kursu · İleri seviye · Ders 8/56

<source media="..."> ile ekran bazlı görsel değiştirme yaparsın.

Media özniteliği nedir?

<source>'a media özniteliği eklemek, o kaynağın hangi ekran koşulunda seçileceğini söyler. Değer, CSS'teki @media sözdizimini kullanır.

Örneğin media="(max-width: 600px)" yalnızca dar ekranlarda, media="(orientation: portrait)" yalnızca dikey tutuşta çalışır. Tarayıcı, listede koşula uyan ilk source'u seçer; gerisine bakmaz. Bu yüzden sıra önemlidir: daha özel koşullar yukarıda, daha genel koşullar aşağıda olmalıdır.

Art direction nedir?

Art direction, aynı sahnenin farklı ekranlarda farklı karelerle gösterilmesidir. Masaüstünde geniş bir manzara işe yarar; ama telefonda o genişlikte kişiler çok küçük kalır. Telefonda yüzleri yakınlaştıran ayrı bir kare sunmak gerekir.

srcset ile yalnız çözünürlük değişir, kare aynı kalır. <picture> ve media ile ise karenin kendisi değişir. Yani srcset aynı görselin boyutunu, media ile <picture> ise görselin kendisini değiştirir.

Uygulama İki source, media ve img yaz

Body içine bir <picture> ekle. İçine iki <source> koy: birincinin media özniteliği (min-width: 800px), srcset özniteliği haber-genis.jpg; ikincinin media özniteliği (max-width: 799px), srcset özniteliği haber-dar.jpg olsun. Son olarak bir <img> ekle; src özniteliği haber-dar.jpg, alt özniteliği Haber görseli olsun.

Örnek çözümü göster

<body>
  <picture>
    <source media="(min-width: 800px)" srcset="haber-genis.jpg">
    <source media="(max-width: 799px)" srcset="haber-dar.jpg">
    <img src="haber-dar.jpg" alt="Haber görseli">
  </picture>
</body>

Kendini test et

<source media="(min-width: 800px)"> ne zaman seçilir?
- Ekran genişliği en az 800 piksel olduğunda
- Ekran genişliği en fazla 800 piksel olduğunda
- Görsel en az 800 bayt ağırlığında olduğunda
- Tarayıcı 800 milisaniye yüklendiğinde
Cevabı göster

Ekran genişliği en az 800 piksel olduğunda — Doğru. min-width: 800px, ekran genişliği en az 800 piksel demektir.

Source'a media özniteliği yaz

<picture>
  <source ____="(min-width: 768px)" srcset="hero-genis.jpg">
  <img src="hero-dar.jpg" alt="Hero görsel">
</picture>

Cevabı göster

<picture>
  <source media="(min-width: 768px)" srcset="hero-genis.jpg">
  <img src="hero-dar.jpg" alt="Hero görsel">
</picture>

Media sorgusunu anlamıyla eşleştir

(min-width: 800px)

En az 800 piksel genişlik
(max-width: 600px)

En fazla 600 piksel genişlik
(orientation: portrait)

Dikey tutuş
(orientation: landscape)

Yatay tutuş

İleri seviye bölümündeki tüm dersler

Media özniteliği