Medya özellikleri

Medya özelliklerinin cihazlara yanıt vermenize olanak tanıdığı tüm yöntemlerin özeti tercihler.

Medya sorguları olmadan uyumlu tasarım mümkün olmaz. Medya sorgularından önce, kullanıcıların web sitenizi ziyaret etmek için ne tür cihazlar kullandığını öğrenmenin bir yolu yoktu. Tasarımcılar varsayımlarda bulunmak zorundaydı. Bu varsayımlar sabit genişlikli tasarımlar veya likit düzenler olarak kodlanıyordu.

Medya sorgularının kullanıma sunulmasıyla tüm bunlar değişti. Tasarımcılar ilk kez insanlarla yarı yarıda tanışabildi. Tasarımcılar, ekran düzenlerini kullanıcıların cihazlarına uygun şekilde ayarlayabildi.

Bir medya sorgusunun, isteğe bağlı ve zorunlu bir medya özelliğinden oluştuğunu unutmayın. Yıllar içinde medya türlerinde pek bir değişiklik olmadı. Daha sadece dört olası değer vardır:

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

Öte yandan, medya özellikleri büyük ölçüde gelişti. Tasarımcılar artık kullanıcıların karşısına yarı katın ötesinde kalarak tasarımları ekran boyutundan çok daha fazlasına uyacak şekilde uyarlayabiliyor.

Görünüm boyutları

Web'deki en popüler medya sorguları, görüntü alanı genişliğiyle ilgili olanlardır. Ancak burada bile bir seçenek sunuluyor. Belirli bir genişliğin altındaki stilleri uygulamak için max-width medya özelliğini veya belirli bir genişliğin üzerindeki stilleri uygulamak için 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ı seviyorum. Düzen stillerini eklemeli bir şekilde uygularım. Önceki kuralları geri almak yerine her ayrılma noktasında yeni düzen kuralları uyguluyorum.

Bu ekleme yaklaşımı yükseklik için de işe yarar. Görüntü alanı yüksekliği arttıkça, min-height sayesinde daha fazla kural girebilirsiniz. Örneğin, yeterli dikey alan varsa tarayıcı penceresinin en üstüne 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 sabitlenir ancak yeterli dikey alan yoksa yapışkanlık kaldırılır.

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

min- ile max- ön ekleri arasından seçim yapmak yalnızca width ve height için geçerli değildir. aspect-ratio medya özelliği de aynı seçeneği sunar. Ayrıca, stilleri tam bir genişlik-yükseklik oranıyla uygulamak istiyorsanız öneksiz bir sürüm de sunar.

@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 sağlamak, kısa sürede soruna yol açabilir. Bu kadar ayrıntılı bir kontrol düzeyine 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" terimi, ve "yatay" genellikle mobil cihazların yönünü belirtmek için kullanılır. orientation medya özelliği cihaza özel değildir. Tipik bir dizüstü bilgisayardaki tam ekran tarayıcı penceresinin orientation değeri landscape olur.

Ekranlar

Farklı ekranların, dpi (inç başına nokta) cinsinden ölçülen farklı piksel yoğunlukları vardır. resolution medya özelliğini kullanarak stillerinizi farklı piksel yoğunluklarına göre ayarlayabilirsiniz. aspect-ratio gibi, resolution için de üç çeşit vardır: minimum, maksimum ve tam.

@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.
}

Hiçbir zaman resolution medya sorgusu kullanmanız gerekmeyebilir. Piksel yoğunluğu genellikle yalnızca resimler için sorun teşkil eder. Duyarlı resimler ise piksel yoğunluğunu doğrudan HTML'de çözmenin bir yoludur.

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

update değerinin none olması, yenileme hızı olmadığı anlamına gelir. Örneğin, yazdırılmış bir sayfa güncellenemez.

update değerinin slow olması, ekranın hızlı bir şekilde yenilenemeyeceği anlamına gelir. E-mürekkep ekranı, yavaş yenileme hızına sahip ekranlara bir örnektir.

update değerinin fast olması, ekranın animasyonları ve geçişleri işleyecek kadar hızlı yenileneceğ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 oluşturma modülünde, web uygulaması manifest dosyasında mülklerin nasıl tanımlanacağını öğrendiniz. display adlı bu özelliklerden birine fullscreen, standalone, minimum-ui veya browser değerini verebilirsiniz. İlgili display-mode medya özelliği, stillerinizi bu farklı seçeneklere göre uyarlamanıza olanak tanır.

Web uygulaması manifestinizde display standalone değerini sağladığınızı varsayalım. Birisi sitenizi ana ekranına eklerse site herhangi bir tarayıcı arayüzü olmadan başlatılır. Bu kullanıcılar için geri düğmesi göstermeye karar verebilirsiniz.

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

Renk

Cihazların renk özelliklerini sorgulamak için kullanılabilecek çok sayıda medya özelliği vardır. Yalnızca gri tonları üreten herhangi bir ekran için stillerinizi ayarlamak istiyorsanız monochrome medya özelliğini herhangi bir değer olmadan kullanabilirsiniz.

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

Buna karşılık gelen bir color medya özelliği vardır.

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

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

Bu örnekte renk değerleri, ekranın maksimum parlaklık, renk derinliği ve kontrast oranı kombinasyonunu bildiren dynamic-range medya özelliğine göre güncellenir. Olası değerler: standard veya high. dynamic-range değerinin high olduğunu bildiren yüksek tanımlı bir ekrana, yeni CSS color() işlevi kullanılarak farklı bir renk alanı verilir.

.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şime geçmek için kullanılan giriş mekanizması türünü de bildirebilir: hover, any-hover, pointer ve any-pointer. Daha fazla bilgi için etkileşimle ilgili modüle göz atı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 ayrıntılı bilgi için tema ve erişilebilirlik ile ilgili modüllere bakın.

Medya özelliklerini tek bir medya sorgusunda birleştirebilirsiniz. Animasyon stillerinizin kapsamını, yalnızca cihazın yenileme hızı yüksek olduğunda ve kullanıcı az hareketle ilgili bir tercih belirtmemişse uygulanacak şekilde ayarlayabilirsiniz.

@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

Kullanıma sunulacak daha fazla medya özelliği var.

forced-colors ve inverted-colors medya özellikleri, bir cihazın kısıtlanmış veya ters çevrilmiş bir 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ı medya özelliği, kullanıcıların sayaçlı bir bağlantı kullandığını belirtmesine olanak tanır. Böylece daha küçük veya daha az öğe gönderebilirsiniz.

Diğer teklifler hâlâ oluşturulma aşamasındadır. Bir sonraki ve son modülde, farklı ekran yapılandırmalarını işleyen bir medya özelliği teklifi hakkında bilgi edineceksiniz.

Öğrendiklerinizi sınayın

Medya özellikleri hakkındaki bilginizi test edin