CSS3 Medya Sorguları

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-width800px) { 
    #logo { max-height100%; }
}

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-width768px) and (max-width959px)

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-width768px)

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-width768px) and (max-device-width1024px)
@media screen and (orientationportrait)
@media print and (min-resolution150dpi)
@media only screen and (device-aspect-ratio16/9)

Son olarak medya sorgularını kullandığımızda ortaya nasıl bir sonuç çıktığına bakalım.

Medya Sorgu Çıktısı

YORUM FORMU