Merhaba. Daha önceki bir yazıda sitemizi ziyaret eden mobil kullanıcıları nasıl tespit edeceğimizden bahsetmiştim. Bu sayede mobil aygıtlar için farklı sayfalar oluşturup daha iyi bir dizayn sağlayabiliyorduk. CSS3'ün ortaya çıkmasıyla beraber farklı ekran çözünürlüklerindeki aygıtlar için farklı css özellikleri belirlemek artık daha kolay hale geldi. Günümüzde cep telefonları, tabletler gibi farklı çözünürlüklerde çalışan bir çok aygıtın olduğunu ve bunların neredeyse masaüstü bilgisayarlar kadar web'de gezindiğini düşünürsek işimizi kolaylaştıracak çözüm CSS3'te yer alan medya sorguları.
Medya sorguları bir veya daha fazla tipe ve koşula göre sorgulama yapar ve sorgulama doğru ise belirtilen css özelliklerini çalıştırır.
Genel kullanımı şu şekildedir:
@media media and (özellik:değer) { css tanımlamaları }
Bir örnek ile açıklayalım:
@media only screen and (max-width: 800px) {
#logo { max-height: 100%; }
}
Burada only screen medya tipini ifade eder. Medya tipleri şunlardır.
- all (Tüm araçlar için kullanılır.)
- aural (Ses sentez birimlerinde kullanılır.)
- braille (Braille dokunsal okuyucularda kullanılır.)
- embossed (Braille yazıcı çıktıları için kullanılır.)
- handheld (Taşınabilir telefonlar ve PDA’lar için kullanılır.)
- print (Yazıcı çıktılarında görüntüleme için kullanılır.)
- projection (Projeksiyonda görüntüleme için kullanılır.)
- screen (Bilgisayarda görüntüleme için kullanılır.)
- tty (Bilgisayar terminalleri ve eski taşınabilir araçlar ile görüntülemede kullanılır.)
- tv (Televizyonda görüntülemede kullanılır.)
max-width: 800px ise medyanın hangi ekran çözünürlüğünde css özelliklerini aktif hale getireceğini belirler. Süslü parantezler içindeki css tanımlamaları ise bu medya sorgulaması doğru ise çalıştırılacak css özelliklerini ifade eder.
Mantıksal Operatörler
Medya sorgularında kullanabileceğimiz mantıksal operatörlere göz atalım.
and
Aynı anda iki veya daha fazla medya özelliği belirtmek için kullanılır.
@media screen and (min-width: 768px) and (max-width: 959px)
Ekran genişliği en az 768 ve en fazla 959 piksel olan ekranlarda uygulanır.
not
Negatif ifadedir. Özelliğin uygulanabilmesi için not ile belirtilen medya şartı sağlanmamalıdır.
@media not screen and (color)
Bilgisayar ve renkli ekran olmayan durumlarda uygulanır.
only
Sadece bu şartlar geçerli olduğunda uygulanır. Medya sorgularını desteklemeyen cihazlardan bu medya sorgularını saklamak için kullanılır.
@media only screen and (min-width: 768px)
Sadece bilgisayar ve ekran genişliği 768 pikselden büyük aygıtlarda kullanılır.
Medya Özellikleri
width
Görüntünün genişliği. min- ve max- önekleri kullanılabilir.
height
Görüntünün yüksekliği. min- ve max- önekleri kullanılabilir.
device-width
Görüntüleyen cihazın genişliği. min- ve max- önekleri kullanılabilir.
device-height
Görüntüleyen cihazın yüksekliği. min- ve max- önekleri kullanılabilir.
orientation
Konumlandırma. portrait veya landscape olarak dikey ya da yatay seçilebilir.
aspect-ratio
Görüntünün en-boy oranı. min- ve max- önekleri kullanılabilir.
device-aspect-ratio
Görüntüleyen cihazın en-boy oranı. min- ve max- önekleri kullanılabilir.
color
Her renk bileşeni için renk bitlerini sayar. Sadece color derseniz bütün renk bileşenleri için geçerli olur. min- ve max- önekleri kullanılabilir.
color-index
Cihazın renk kontrol tablosundaki renk girişi sayısını kontrol eder. min- ve max- önekleri kullanılabilir.
monochrome
Frame buffer içindeki piksel başına düşen bit sayısını kontrol eder. Sadece monochrome ifadesi bütün monochrome cihazları kapsar. min- ve max- önekleri kullanılabilir.
resolution
Görüntüleyen cihazın çözünürlüğü. min- ve max- önekleri kullanılabilir.
scan
Cihazın progressive mi interlace tarama mı kullandığını kontrol eder. Genelde televizyonlar için kullanılır.
grid
Cihazın grid mi bitmap mi olduğunu kontrol eder. Grid cihazları “tty” terminalleri içerirken, telefonlar tek bir fonta sahiptir.
Örnekler:
@media screen and (max-width:480px)
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
@media screen and (orientation: portrait)
@media print and (min-resolution: 150dpi)
@media only screen and (device-aspect-ratio: 16/9)
Son olarak medya sorgularını kullandığımızda ortaya nasıl bir sonuç çıktığına bakalım.