Medya sorguları

Tasarımcılar, tasarımlarını kullanıcılara uygun olacak şekilde ayarlayabilir. Bunun en net örneği, kullanıcının cihazının form faktörüdür (cihazın genişliği, cihaz en boy oranı vb.). Tasarımcılar, medya sorgularını kullanarak bu farklı form faktörlerine yanıt verebilir.

Medya sorguları, @media anahtar kelimesiyle (CSS at-kuralı) başlatılır ve çeşitli kullanım alanları için kullanılabilir.

Farklı çıkış türlerini hedefleyin

Web siteleri genellikle ekranlarda gösterilir ancak CSS, diğer çıktılar için web sitelerini biçimlendirmek amacıyla da kullanılabilir. Web sayfalarınızın ekranda bir şekilde, yazdırıldığında ise farklı görünmesini isteyebilirsiniz. Medya türlerini sorgulayarak bunu yapabilirsiniz.

Bu örnekte, arka plan rengi gri olarak ayarlanmıştır. Ancak sayfa basılı olacaksa arka plan rengi şeffaf olmalıdır. Bu sayede kullanıcının yazıcı mürekkebi tasarrufu sağlanır.

body {
  color: black;
  background-color: grey;
}

@media print {
  body {
    background-color: transparent;
  }
}

@media öğesini stil sayfanızda bu şekilde kullanabilir veya ayrı bir stil sayfası oluşturup media özelliğini bir link öğesinde kullanabilirsiniz:

<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="print.css" media="print">

CSS'niz için herhangi bir medya türü belirtmezseniz otomatik olarak all medya türü değeri olur. Bu iki CSS bloğu eşdeğerdir:

body {
  color: black;
  background-color: white;
}

@media all {
   body {
     color: black;
     background-color: white;
   }
}

Aşağıdaki iki HTML satırı da eşdeğerdir:

<link rel="stylesheet" href="global.css">

<link rel="stylesheet" href="global.css" media="all">

Sorgu koşulları

Medya türlerine koşul ekleyebilirsiniz. Bunlara medya sorguları denir. CSS yalnızca medya türü eşleştiğinde ve koşul da doğru olduğunda uygulanır. Bu koşullara medya özellikleri denir.

Medya sorgularının söz dizimi şu şekildedir:

@media type and (feature)

Stilleriniz ayrı bir stil dosyasındaysa link öğesinde medya sorgularını kullanabilirsiniz:

<link rel="stylesheet" href="specific.css" media="type and (feature)">

Tarayıcı penceresinin yatay modda (görüntü alanı genişliği yüksekliğinden büyük) veya dikey modda (görüntü alanı yüksekliği genişliğinden büyük) olmasına bağlı olarak farklı stiller uygulamak istediğinizi varsayalım. orientation adlı medya özelliğini kullanarak şunları test edebilirsiniz:

@media all and (orientation: landscape) {
   // Styles for landscape mode.
}
@media all and (orientation: portrait) {
   // Styles for portrait mode.
}

Ayrı stil sayfaları kullanmayı tercih ederseniz:

<link rel="stylesheet" href="landscape.css" media="all and (orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="all and (orientation: portrait)">

Bu durumda medya türü all'tür. Bu varsayılan değer olduğundan, isterseniz bunu bırakabilirsiniz:

@media (orientation: landscape) {
   // Styles for landscape mode.
}
@media (orientation: portrait) {
   // Styles for portrait mode.
}

Ayrı stil sayfaları da kullanabilirsiniz:

<link rel="stylesheet" href="landscape.css" media="(orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="(orientation: portrait)">

print gibi farklı medya türleri için ayrı stil sayfaları kullanmak uygun olsa da her medya sorgusu için ayrı bir stil sayfası kullanmak muhtemelen iyi bir fikir değildir. Bunun yerine @media kuvvetleri kurallarını kullanın.

Stilleri görüntü alanı boyutuna göre ayarla

Duyarlı tasarım için en faydalı medya özelliklerinden biri, tarayıcı görüntü alanının boyutlarını içerir. Tarayıcı penceresi belirli bir genişlikten geniş olduğunda stil uygulamak için min-width öğesini kullanın.

@media (min-width: 400px) {
  // Styles for viewports wider than 400 pixels.
}

Belirli bir genişliğin altındaki stilleri uygulamak için max-width medya özelliğini kullanın:

@media (max-width: 400px) {
  // Styles for viewports narrower than 400 pixels.
}

Medya sorgularınızda herhangi bir CSS uzunluk birimini kullanabilirsiniz. İçeriğiniz çoğunlukla görsel tabanlıysa pikseller en uygun seçenek olabilir. İçeriğiniz çoğunlukla metin tabanlıysa em veya ch gibi metin boyutuna dayalı bir göreceli birim kullanmak daha mantıklı olabilir:

@media (min-width: 25em) {
  // Styles for viewports wider than 25em.
}

Birden fazla koşul uygulamak için medya sorgularını da birleştirebilirsiniz. Medya sorgularınızı birleştirmek için and kelimesini kullanın:

@media (min-width: 50em) and (max-width: 60em) {
  // Styles for viewports wider than 50em and narrower than 60em.
}

Ayrılma noktalarını içeriğe göre seçin

Bir medya özelliği koşulunun doğru olduğu noktaya ayrılma noktası adı verilir. Ayrılma noktalarınızı popüler cihaz boyutlarına göre değil, içeriğinize göre seçmeniz önerilir. Çünkü bunlar her teknoloji sürümü döngüsünde değişebilmektedir.

Bu örnekte, 50em metin satırlarının rahatsız edici şekilde uzunlaştığı noktadır. Bu nedenle, arayüzün daha okunaklı olması için bir ayrılma noktası oluşturulur. column-count özelliği kullanılarak metin, bu noktadan itibaren iki sütuna bölünür.

@media (min-width: 50em) {
  article {
    column-count: 2;
  }
}

Kombinasyonlar

Yalnızca genişliğe değil, görüntü alanının yüksekliğine göre medya sorguları kullanabilirsiniz. Bu, "ekranın üst kısmı"ndaki arayüz içeriğini optimize etmek için yararlı olabilir. Önceki örnekte, okuyucular geniş ancak kısa bir tarayıcı penceresi kullanıyorlarsa bir sütundan önce aşağı, sonra tekrar yukarı kaydırarak ikinci sütunun üst kısmına gelin. Sütunları yalnızca görüntü alanı hem yeterince geniş hem de yeterince yüksek olduğunda uygulamak daha güvenlidir.

Medya sorgularını birleştirerek stillerin yalnızca tüm koşullar doğru olduğunda geçerli olmasını sağlayabilirsiniz. Bu örnekte, sütun stillerinin uygulanabilmesi için görüntü alanının en az 50em genişliğinde ve 60em yüksekliğinde olması gerekir. Bu durak noktaları, içerik miktarına göre seçilmiştir.

@media (min-width: 50em) and (min-height: 60em) {
  article {
    column-count: 2;
  }
}

Bu örneklerde, tasarımları kullanıcının cihazının form faktörüne uyarlamak için medya sorgularının nasıl kullanılabileceği gösterilmektedir ancak bu örnekler, olasılıkların sadece bir kısmını göstermektedir. Medya sorguları, genişlik ve yüksekliğin çok ötesine geçerek erişilebilirlik özellikleri ve tema renkleri için kullanıcı tercihlerine erişebilir. Düzen ayarlamaları yapmak için medya sorgularını kullanmak, bu özelliklerin ve daha fazlasının temelini oluşturan duyarlı tasarıma mükemmel bir başlangıçtır.

Öğrendiklerinizi sınayın

Duyarlı medya sorguları hakkındaki bilginizi test edin.