Medya özellikleri

Medya sorguları olmadan duyarlı tasarım mümkün olmazdı. Medya sorgularından ö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 varsayımlarda bulunmak zorunda kaldı. Bu varsayımlar, sabit genişlikli tasarımlara veya akışkan düzenlere kodlanmıştır.

Medya sorgularının kullanıma sunulmasıyla bu durum değişti. Tasarımcılar ilk kez insanlarla yarı yolda buluşabiliyordu. 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 pek değişiklik olmadı. Yine yalnızca dört olası değer vardır:

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

Diğer yandan medya özellikleri büyük ölçüde genişledi. Tasarımcılar artık kullanıcıların beklentilerini yarı yoldan daha fazla karşılayabilir ve tasarımları yalnızca ekran boyutuna değil, çok daha fazla şeye uyacak şekilde uyarlayabilir.

Görüntü alanı boyutları

Web'deki en popüler medya sorguları, görüntü alanı genişliğiyle ilgili olanlardır. Ancak burada bile bir seçim yapmanız gerekir. 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;
  }
}

Ben şahsen min-width kullanmayı tercih ediyorum. Düzen stillerini eklemeli olarak uygularım. Önceki kuralları geri almak yerine her kesme noktasında yeni düzen kuralları uyguluyorum.

Bu ekleme 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 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 üstbilgi varsayılan olarak sabitlenir ancak yeterli dikey alan yoksa sabitlik kaldırılır.

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

min- ve max- önekleri 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. Genişlik ve yükseklik arasında tam bir oranla stil uygulamak isterseniz önek içermeyen 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 kontrolden çıkabilir. Bu ayrıntılı 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" ve "yatay" terimleri en sık mobil cihazların yönünü ifade etmek için kullanılsa da orientation medya özelliği cihaza özel değildir. Normal bir dizüstü bilgisayardaki tam ekran tarayıcı penceresinin orientation değeri landscape olur.

Ekranlar

Farklı ekranların piksel yoğunlukları farklıdır ve dpi (inç başına nokta) cinsinden ölçülür. resolution medya özelliğini kullanarak farklı piksel yoğunlukları için stillerinizi ayarlayabilirsiniz. aspect-ratio gibi, resolution de üç çeşittir: 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 ve duyarlı resimler, piksel yoğunluğuyla doğrudan HTML'de başa çıkmanın 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 üç değerden birini bildirir: none, slow ve fast.

update değeri none ise yenileme hızı olmadığı anlamına gelir. Örneğin, yazdırılan bir sayfa güncellenemez.

update değeri slow ise ekranın hızlı yenilenemediği anlamına gelir. E-mürekkep ekran, yenileme hızı düşük bir ekran örneğidir.

update fast değeri, ekranın animasyonları ve geçişleri işleyecek kadar 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 oluşturma modülünde, web uygulaması manifest dosyasında özelliklerin nasıl tanımlandığını görmüştünüz. Bu özelliklerden birine display adı verilir ve bu özelliğe fullscreen, standalone, minimum-ui veya browser değeri verebilirsiniz. İlgili display-mode medya özelliği, stillerinizi bu farklı seçeneklere göre uyarlamanıza olanak tanır.

Web uygulaması manifestinizde display değeri olarak standalone sağladığınızı varsayalım. Bir kullanıcı sitenizi ana ekranına eklerse site, 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

Bir cihazın renk özelliklerini sorgulamak için çok sayıda medya özelliği vardır. Stillerinizi yalnızca gri tonları çıkaran herhangi bir ekran 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 ekranlarda color-gamut, color-index veya dynamic-range medya özelliklerini kullanarak sorgu yazabilirsiniz. Bunların tümü, ekranın renk özellikleri hakkında ayrıntılı bilgi verir.

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

.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şimde bulunmak için kullanılan giriş mekanizmasının türünü de (hover, any-hover, pointer ve any-pointer) bildirebilir. Daha fazla bilgi için etkileşimle ilgili modüle bakın.

Kullanıcı tercihi sorguları

CSS'yi kullanarak, kullanıcılarınızın içeriğinize kendilerine uygun bir şekilde erişebildiğinden emin olmak için onlarla ortak çalışabilirsiniz. Bu derste, kullanıcının cihazının boyutlarına ve özelliklerine göre farklı CSS'leri nasıl uygulayacağınızı öğrendiniz. Ancak kullanıcının ayarlarına göre farklı CSS'ler de uygulayabilirsiniz.

Koyu ve açık mod

Kullanıcınızın açık veya koyu tema tercihine yanıt verebilirsiniz. Birçok kullanıcı bunu sistem tercihi olarak ayarlar.

Kullanıcı arayüzü öğeleri için renk şemasını ayarlama

Tarayıcı, kaydırma çubukları ve form öğeleri gibi şeyler için varsayılan renkler sağlar. color-scheme: light olanlar için açık tema mı yoksa color-scheme: dark olanlar için koyu tema mı kullanılacağını belirtebilirsiniz. Ayrıca, color-scheme: light dark ile sayfanın her ikisini de desteklediğini belirtebilirsiniz. Bu özelliği :root veya html öğesinde ayarlayarak tüm sayfanın şemasını belirleyebilir ya da belirli öğeler için geçersiz kılabilirsiniz.

Stilleriniz yüklenmeden önce bir sayfanın şemasını ayarlamak için meta etiketi de belirleyebilirsiniz.color-scheme Sayfadaki bir öğede color-scheme: normal değerini ayarlarsanız bu meta etiketinde ayarladığınız color-scheme değeri kullanılır.

<meta name="color-scheme" content="dark light">

prefers-color-scheme medya özelliği

Ayrıca, prefers-color-scheme için bir medya sorgusuyla kullanıcının tercih ettiği renk temasına yanıt olarak özel stiller de tanımlayabilirsiniz.

light-dark

Kullanıcılarınıza hem açık hem de koyu tema seçeneği sunuyorsanız her rengi bir medya sorgusunun içine ayarlamak ayrıntılı bir işlem olabilir. light-dark(), her ikisini de tek bir mülkte belirtmenize olanak tanır.

Bunu etkinleştirmek için öğede veya öğenin üst öğelerinden birinde color-scheme: light dark değerini ayarlamanız gerekir. Önce açık modda kullanılacak bir renk, ardından koyu modda kullanılacak bir renk ayarlarsınız.

h1{
  color: light-dark( var(--text-light), var(--text-dark));
}

Sistem tercihi açık mod isteyecek şekilde ayarlanmışsa başlık siyah olur. Tercihleri koyu mod ise başlık beyaz olur.

Kontrast tercihleri

Kullanıcılarınız, yüksek veya düşük kontrastlı içerikleri daha kolay okuyabilir ve sistemlerini, temanızı kendileri için en uygun olanla değiştirecek şekilde ayarlayabilir. Sizin rolünüz, sitenizin kullanıcıların tercihlerine uygun şekilde çalışmaya devam etmesini sağlamaktır.

Basamaklı stil modülünde, !important yerel kullanıcı stillerinin, bir web sayfasının sağladığı yazılmış stilleri geçersiz kılabileceğini hatırlayabilirsiniz. Bu sayede kullanıcılar, kendileri için daha uygun olan stilleri kullanabilir.

Zorunlu renkler

Windows, kullanıcıların web sitesindeki temaları geçersiz kılmak için seçebileceği "Kontrast temaları" sunar. Bu temalar genellikle yüksek kontrastlıdır ve açık veya koyu modda olabilir. CSS'de bu özelliğe zorunlu renkler adı verilir ve çoğu durumda siteniz bu modda beklendiği gibi çalışır. Düğmeler, bağlantılar, girişler ve diğer içerikler temanın renklerini kullanır.

Bazen, örneğin standart dışı öğeler kullanıyorsanız stillerinizi ayarlamanız gerekebilir. Kullanıcı zorunlu renkleri etkinleştirdiğinde stilleri uygulamak için @media (forced-colors: active) medya sorgusunu kullanabilirsiniz.

Bazı durumlarda, bir sitenin stilleri içeriğin kendisini anlamak için gereklidir. Örneğin, renk seçici veya renk anahtarı içeren bir grafik. Zorunlu renkler modunu devre dışı bırakmak için bir öğede forced-color-adjust: none; ayarlayabilirsiniz. Yalnızca belirli öğeleri devre dışı bıraktığınızdan ve içeriğe zorunlu renkler modunda erişilebildiğinden emin olun.

Yüksek kontrast

Bazı kullanıcılar, sistemlerini kontrastı artıracak şekilde ayarlayabilir. Yanıtınızdaki stilleri prefers-contrast: more medya sorgusuyla ayarlayabilirsiniz.

İndirgenmiş hareket

Kullanıcının azaltılmış hareket tercihine prefers-reduced-motion medya sorgusuyla yanıt verebilirsiniz. Bu özellik genellikle epilepsi, vestibüler hareket bozuklukları veya migren hassasiyeti olan kişilerde tetikleyici olabilecek büyük hareketlerden kaçınan alternatif animasyonlar sağlamak için kullanılır. Daha fazla bilgiyi Animasyonla çalışırken dikkat edilmesi gerekenler başlıklı makalede bulabilirsiniz.

Senaryo Yazma

Kullanıcılarınız sitenizi JavaScript devre dışıyken ziyaret edebilir. Bu durumda, scripting medya sorgusunu kullanarak CSS'nizi ayarlayabilir ve kullanıcıların içeriğinize erişmeye devam etmesini sağlayabilirsiniz.

@media (scripting: none) {
  /* Styles when JavaScript is disabled*/
 }

@media (scripting: initial-only) {
  /* Styles when JavaScript is available only for an initial render, for example with a printed page or server side rendering */
}

@media (scripting: enabled) {
   /* Styles when Javascript is enabled */
}

Anlayıp anlamadığınızı kontrol etme

Medya özellikleriyle ilgili bilginizi test edin