Medya özellikleri

Medya özelliklerinin cihazlara ve tercihlere yanıt vermenize olanak tanıdığı tüm yolların özeti.

Duyarlı tasarım, medya sorguları olmadan mümkün olmaz. Medya sorguları kullanılmadan önce, kullanıcıların web sitenizi ziyaret etmek için ne tür bir cihaz kullandığını bilmenin bir yolu yoktu. Tasarımcıların varsayımlar yapması gerekiyordu. Bu varsayımlar sabit genişlikli tasarımlara veya sıvı düzenlere kodlanmıştır.

Tüm bunlar medya sorgularının kullanıma sunulmasıyla değişti. Tasarımcılar ilk kez kullanıcıların beklentilerini karşılayabiliyordu. Tasarımcılar, düzenlerini kullanıcıların cihazlarına göre ayarlayabilir.

Medya sorgusunun isteğe bağlı bir medya türü ve zorunlu bir medya özelliği içerdiğini unutmayın. Yıllar içinde medya türlerinde çok fazla değişiklik olmadı. Yine de yalnızca dört olası değer vardır:

@media all
@media screen
@media print
@media speech

Öte yandan medya özellikleri büyük ölçüde genişledi. Tasarımcılar artık tasarımları ekran boyutundan çok daha fazlasına uyacak şekilde uyarlayarak kullanıcıların beklentilerini karşılayabilir.

Browser Support

• 1
• 12
• 1
• 3

Source

Görüntü alanı boyutları

Web'de en popüler medya sorguları, görüntü alanı genişliğiyle ilgili olanlardır. Ancak burada bile bir seçim sunulur. Belirli bir genişliğin altındaki stilleri uygulamak için max-width medya özelliğini, belirli bir genişliğin üzerindeki stilleri uygulamak için ise min-width medya özelliğini kullanabilirsiniz.

main {
  display: grid;
  grid-template-columns: 2fr 1fr;
}
@media (max-width: 45em) {
  main {
    display: block;
  }
}

@media (min-width: 45em) {
  main {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

Şahsen ben min-width'ü kullanmayı tercih ediyorum. Sayfa düzeni stillerini eklemeli şekilde uyguluyorum. Önceki kuralları geri almak yerine her kesme noktasında yeni düzen kuralları eklerim.

Bu eklemeli yaklaşım, yükseklik için de geçerlidir. min-height kullanarak daha fazla görüntü alanı yüksekliği kullanılabilir hale geldikçe daha fazla kural ekleyebilirsiniz. Örneğin, yeterli dikey alan varsa tarayıcı penceresinin üst kısmına sabitlemek istediğiniz bir başlık öğeniz olabilir.

@media (min-height: 30em) {
  header {
    position: fixed;
  }
}

Ancak isterseniz max-height medya özelliğini kullanabilirsiniz. Burada başlık varsayılan olarak sabitlenmiştir ancak yeterli dikey alan yoksa yapışkanlığı kaldırılır.

header {
  position: fixed;
}
@media (max-height: 30em) {
  header {
    position: static;
  }
}

min- ve max- ön ekleri arasında seçim yapma, yalnızca width ve height için geçerli değildir. aspect-ratio medya özelliği de aynı seçeneği sunar. Stilleri tam bir genişlik-yükseklik oranında uygulamak istiyorsanız ön ek içermeyen bir sürüm de sunulur.

@media (min-aspect-ratio: 16/9) {
  // The ratio of width to height is at least 16 by 9.
}
@media (max-aspect-ratio: 16/9) {
  // The ratio of width to height is less than 16 by 9.
}
@media (aspect-ratio: 16/9) {
  // The ratio of width to height is exactly 16 by 9.
}

Farklı en boy oranları için farklı stiller sunmak çok çabuk kontrolden çıkabilir. Bu ayrıntılı düzeyde kontrole ihtiyacınız yoksa orientation medya özelliği ihtiyaçlarınıza daha uygun olabilir. İki olası değeri vardır: portrait veya landscape.

@media (orientation: portrait) {
  // The width is less than the height.
}
@media (orientation: landscape) {
  // The width is greater than the height.
}

"Dikey" ve "yatay" terimleri genellikle mobil cihazların yönünü belirtmek için kullanılsa da orientation medya özelliği cihaza özgü değildir. Tipik bir dizüstü bilgisayardaki tam ekran tarayıcı penceresinin orientation değeri landscape olur.

Ekranlar

Farklı ekranların piksel yoğunlukları farklıdır. Bu yoğunluklar inç başına nokta (dpi) cinsinden ölçülür. resolution medya özelliğini kullanarak stillerinizi farklı piksel yoğunluklarına göre ayarlayabilirsiniz. aspect-ratio gibi resolution da minimum, maksimum ve tam olmak üzere üç biçimde gelir.

@media (min-resolution: 300dpi) {
  // The display has a pixel density of at least 300 dots per inch.
}
@media (max-resolution: 300dpi) {
  // The display has a pixel density less than 300 dots per inch.
}
@media (resolution: 300dpi) {
  // The display has a pixel density of exactly 300 dots per inch.
}

resolution medya sorgularını hiç kullanmanıza gerek kalmayabilir. Piksel yoğunluğu genellikle yalnızca resimler için sorun teşkil eder. Duyarlı resimler, piksel yoğunluğunu doğrudan HTML'de ele almanın bir yoludur.

Öte yandan, animasyonlarınızı ve geçişlerinizi CSS'de tanımlarsınız. Bu animasyon ve geçişleri, update medya özelliğini kullanarak farklı yenileme hızlarına yanıt verecek şekilde ayarlayabilirsiniz. Bu medya özelliği üç değerden birini raporlar: none, slow ve fast.

update değeri none ise yenileme hızı yoktur. Örneğin, basılı bir sayfa güncellenemez.

update değerinin slow olması, ekranın hızlı bir şekilde yenilenemediği anlamına gelir. E-mürekkep ekranlar, yenileme hızı düşük ekranlara örnek olarak verilebilir.

update değerinin fast olması, ekranın animasyon ve geçişleri işlemek için yeterince hızlı yenilendiği anlamına gelir.

@media (update: fast) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
  a:hover {
    transform: scale(150%);
  }
}

Ekranın tüm yönleri donanım özellikleriyle ilgili değildir. Tema modülünde, web uygulaması manifest dosyasında mülkleri nasıl tanımlayacağınızı görmüştünüz. Bu özelliklerden biri display olarak adlandırılır ve fullscreen, standalone, minimum-ui veya browser değerini alabilir. İlgili display-mode medya özelliği, stillerinizi bu farklı seçeneklere göre uyarlamanıza olanak tanır.

Web uygulaması manifestinizde standalone değerine sahip bir display sağladığınızı varsayalım. Bir kullanıcı sitenizi ana ekranına eklerse site, tarayıcı arayüzü olmadan açılır. Bu kullanıcılar için bir geri düğmesi göstermeye karar verebilirsiniz.

button.back {
  display: none;
}
@media (display-mode: standalone) {
  button.back {
     display: inline;
  }
}

Renk

Bir cihazın renk özelliklerini sorgulamak için birçok medya özelliği vardır. Stillerinizi yalnızca gri tonları gösteren ekranlar için ayarlamak istiyorsanız monochrome medya özelliğini herhangi bir değer olmadan kullanabilirsiniz.

@media (monochrome) {
  body {
    color: black;
    background-color: white;
  }
}

İlgili bir color medya özelliği vardır.

@media (color) {
  body {
    color: maroon;
    background-color: linen;
  }
}

Renkli ekranlar için color-gamut, color-index veya dynamic-range medya özellikleriyle sorgu yazabilirsiniz. Hepsi, ekranın renk özellikleriyle ilgili belirli ayrıntıları raporlar.

Bu örnekte renk değerleri, ekranın maksimum parlaklığı, renk derinliği ve kontrast oranının kombinasyonunu bildiren dynamic-range medya özelliğine yanıt olarak güncellenir. Olası değerler standard veya high'dur. high değerinin high olduğunu bildiren yüksek çözünürlüklü bir ekrana yeni CSS color() işlevi kullanılarak farklı bir renk alanı verilir.dynamic-range

.neon-red {
  color: hsl(355 100% 95%);
}
@media (dynamic-range: high) {
  .neon-red {
    color: color(display-p3 1 0 0);
  }
}

Etkileşim

Medya özellikleri, sitenizle etkileşim kurmak için kullanılan giriş mekanizmasının türünü de bildirebilir: hover, any-hover, pointer ve any-pointer. Daha fazla bilgi için etkileşim modülüne bakın.

Tercihler

Kullanıcı tercihlerine yanıt vermenize olanak tanıyan çeşitli medya sorguları vardır: prefers-color-scheme, prefers-contrast ve prefers-reduced-motion. Daha fazla bilgi için tema ve erişilebilirlik modüllerine bakın.

Medya özelliklerini tek bir medya sorgusunda birleştirebilirsiniz. Animasyon stillerinizi, yalnızca cihazın yenileme hızı yüksekse ve kullanıcı azaltılmış hareket tercihinde bulunmadıysa uygulanacak şekilde kapsama alabilirsiniz.

@media (update: fast) and (prefers-reduced-motion: no-preference) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
  a:hover {
    transform: scale(150%);
  }
}

Diğer medya özellikleri

Daha fazla medya özelliği kullanıma sunulacak.

forced-colors ve inverted-colors medya özellikleri, bir cihazın kısıtlanmış veya ters çevrilmiş renk paleti kullanıp kullanmadığını bildirir.

scripting medya özelliği, CSS'nizi JavaScript'in kullanılabilirliğine göre ayarlamanıza olanak tanır.

prefers-reduced-data adlı bir medya özelliği, kullanıcıların ölçülü bir bağlantıda olduklarını belirtmesine olanak tanır. Böylece, daha küçük veya daha az öğe gönderebilirsiniz.

Diğer teklifler henüz oluşturulma aşamasında. Sonraki ve son modülde, farklı ekran yapılandırmalarını işleyen bir medya özelliği önerisi hakkında bilgi edineceksiniz.

Öğrendiklerinizi test etme

Medya özellikleri hakkındaki bilginizi test edin

Medya sorgusu, @media (width: 1024px) gibi belirli bir genişlikte bir cihaz olup olmadığını kontrol edebilir mi?

Doğru

Belirli bir genişlik yalnızca 1023px'ün üzerindeki ve 1025px'ün altındaki genişlik kontrol edilerek elde edilebilir.

Yanlış

min-width ve max-width kullanılabilir.

Medya sorgusu, @media (aspect-ratio: 4/3) gibi belirli bir aspect-ratio'de cihaz olup olmadığını kontrol edebilir mi?

Doğru

En boy oranına özgü olarak tek bir oran eşleştirilebilir.

Yanlış

Bu seçenek aspect-ratio için mevcuttur.

Hangi renk medya sorguları geçerlidir?

@media (color)

Herhangi bir renkli cihazla eşleşir.

@media (monochrome)

Renk özelliği olmayan tüm cihazlarla eşleşir.

@media (color-gamut: srgb)

sRGB renk özelliğine sahip cihazlarla eşleşir.

@media (min-color-index: 15000)

En az 15.000 renk içeren cihazlarla eşleşir.

@media (dynamic-range: high)

HD renk aralıkları sunan cihazlarla eşleşir.

Aşağıdaki kullanıcı tercihi medya sorgularından hangisi geçerlidir?

@media (prefers-color-scheme: dark)

Kullanıcının işletim sisteminin karanlık moda ayarlandığı durumlarda eşleşir.

@media (prefers-colors: high-definition)

Gerçek değil.

@media (prefers-reduced-motion: reduce)

Kullanıcının işletim sisteminin hareketi azaltacak şekilde ayarlandığı eşleşmeler.

@media (prefers-contrast: more)

Kullanıcının işletim sistemi daha yüksek kontrastlara ayarlandığında eşleşir.

@media (prefers-site-speed: fast)

Gerçek değil.