CSS Medya Sorguları & Boş Alanların Değerlendirilmesi

Bu paylaşımımızda CSS-Tricks websitesinde anlatılan bir konuyu türkçeleştirerek yabancı kaynaklardan faydalanabilme imkanı verebilmeyi amaçlıyoruz. Orijinal yazıya bu linkten ulaşabilirsiniz.

Bu yazımızda tasarım dokunuşlarına biraz daha küçük bir pencereden bakacağız. Aynı zamanda bu mobil uyum medya sorgularını tek bir “stylesheet” üzerinde inceleyeceğiz.

Harici bir “stylesheet” çağırımı CSS medya sorgusu kalıplarında aşağıdaki gibidir:

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />



Linkin “media” özelliğine aşina olabıilirsiniz, “screen”, “print” ve hatta arada bir virgül ile “screen, projection” şekilinde kullanıldığı dahi oluyor. “media” özelliği doğrudan CSS içerisine şu şekilde dahil edilebilir:

@media screen {
  body {
    width: 75%;
  }
}
@media print {
  body {
    width: 100%;
  }
}

Buna benzer şekilde daha ileri bir CSS medya sorgusuyla aşağıdakini de yazabilirsiniz:

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
  body {
    background: #ccc;
  }
}

CSS dosyasında dilediğiniz kadar medya sorgusu kullanabilirsiniz. Şunu da unutmamak gerekir ki, “&” ve operatörüyle birden fazla medya sorgusunun doğruluğunu test ederken “,” veya operatörüyle gruplama,  not anahtar kelimesiyle de mantık işlemleri yapılabilir.

Örnek

Farz edelim ki duyarlı en (width) tasarımımızda web sayfasının %35’inde yanal bar var (sidebar). Bu yanal barın sitenin genişliğine göre oldukça dar veya geniş olabileceğini gösterir; bu durum duyarlı tasarımın doğasında vardır. CSS medya sorgularını kullanarak, “tarayıcı ekranı darsa bunu yap, genişse bunu yap, gerçekten çok geniş ise bunu yap” diyebiliriz. Ayrıca, genişlikle oynamak medya sorgularıyla yapılabilen işlerden yalnızca biridir.

Örnek yan barımızda “Süper Takım” adlı isim listesini email linkleri şeklinde tanımlayacağız. HTML oldukça basit:

<ul id="nav">
   <li><a data-email="chriscoyier@gmail.com" href="mailto:chriscoyier@gmail.com">Chris Coyier</a></li>
   <li><a data-email="elisabeth@moss.com" href="mailto:elisabeth@moss.com">Elisabeth Moss</a></li>
   <li><a data-email="amanda@righetti.com" href="mailto:amanda@righetti.com">Amanda Righetti</a></li>
</ul>

Yalnızca link listesi. “href” özelliği “mailto:” linki. Gözünüzü ısıran tek bir şey varsa o da “data-email” kısmıdır. HTML5’te veri saklamak için “attribute”lar (özellik olarak bahsedildi) kullanılabilir.

Varsayılan liste CSS’i aşağıdaki gibidir:

#sidebar ul li a {
  color: #900;
  text-decoration: none;
  padding: 3px 0; 
  display: block;
}

Dar tarayıcı ekranlarında varsayılan tasarım kodları geçerli olur: Yalnızca link listesi. Ancak tarayıcı ekranı genişledikçe, örnekte 520px ile 699px aldık, açılan ekstra boşluğu mail ikonlarını yerleştirmeye kullanacağız.

@media all and (max-width: 699px) and (min-width: 520px) {
  #sidebar ul li a {
    padding-left: 21px;
    background: url(../images/email.png) left center no-repeat;
  }
}

700px’den 1000px’e doğru ilerlerken yine ekstra boşluğu yalnızca ikonu kullanarak değil bir de “Email:” yazısı ekleyerek değerlendireceğiz.

@media all and (max-width: 1000px) and (min-width: 700px) {
  #sidebar ul li a:before {
    content: "Email: ";
    font-style: italic;
    color: #666;
  }
}

Hala geniş ama 1001px’in üzerine çıktığımızda gerçek anlamda email adresleri linklerin yanlarına yazdıracağız. İşte tam olarak burada HTML5 veri özelliğini(attribute) kullanacağız.

@media all and (min-width: 1001px) {
  #sidebar ul li a:after {
    content: " (" attr(data-email) ")";
    font-size: 11px;
    font-style: italic;
    color: #666;
  }
}

Ve gerçekten büyük genişliklerde, 1151px üzeri, tekrar ikonları link ve email adreslerinin yanlarına ekleyeceğiz. İşin güzel yanı, tekrar aynı kodları yazmak zorunda kalmıyor oluşumuz. Tek yapmamız gereken medya sorgusuna yenisini virgül kullanarak eklemek.

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
  #sidebar ul li a {
    padding-left: 21px;
    background: url(../images/email.png) left center no-repeat;
  }
}

Şimdi hepsi birden!

#sidebar ul li a {
  color: #900;
  text-decoration: none;
  padding: 3px 0; 
  display: block;
}

@media all and (min-width: 1001px) {
  #sidebar ul li a:after {
    content: " (" attr(data-email) ")";
    font-size: 11px;
    font-style: italic;
    color: #666;
  }
}

@media all and (max-width: 1000px) and (min-width: 700px) {
  #sidebar ul li a:before {
    content: "Email: ";
    font-style: italic;
    color: #666;
  }
}

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
  #sidebar ul li a {
    padding-left: 21px;
    background: url(../images/email.png) left center no-repeat;
  }
}

Tarayıcı desteği

Medya sorguları için tarayıcı desteği şaşırtıcı bir şekilde yaygın. Yukarıdaki örneği Firefox, Safari(Mobili dahil), Chrome ve Opera destekliyor. IE 9 ve sonrası destekleyecek ancak 8 ve düşük versiyonlar desteklemiyor. Olur da IE 8’e uygun yazmak isterseniz JavaScript kullanabilirsiniz.

Farklı sorgularda deneyimlerin farklı olacağını da unutmayın. Örneğin iPhone tüm genişlik sorgularını desteklerken cihaz oryantasyonunu desteklemiyor. iPadlerde sorun yok.

Medya sorgularına eklemeler

Genişliği ölçmek pratik açıdan güzel bir örnek ancak tek kullanım da bunla sınırlı değil. Aşağıda bazı alternatif kullanımları görebilirsiniz. Tamamı daha fazla.

Türler

HTML4’te medya tipleri mevcuttu: auralbraillehandheldprintprojectionscreentty, tv. HTML5 ihtiyaca göre ekleme yapabilir. “3d-glasses” özelliği dahil edildi, gerçekten harika. “all” kelimesi tüm sorguları dahil eder.

@media screen, projection { ... }

Boyutlar

Boy ve eni alabilirsiniz ama bu durumda tarayıcının o anki ekran boyutunu almış olursunuz. Kendilerini kullanabilirsiniz ama oldukça ender bir durum olması gerekir. Hem en hem boy (width, height) min/max değerler alırlar. Şu şekilde kullanılabilir: min-widthmax-widthmin-heightmax-height.

@media (min-device-width: 640px) { ... }

Oryantasyon ve Yön

Yöne ve oryantasyona göre sorgu yazılabilir: device-aspect-ratio.

@media screen and (device-aspect-ratio: 16/9) { ... }

Ya da ekran dik veya yatay konumdaysa:

@media (orientation:portrait) { ... }

Renk

Sorguyu ekranın rengine göre de yapabilirsiniz.

@media (color) { /* Screen is in color */ }

@media (min-color-index: 256) { /* Screen has at least 256 colors */ }

@media (monochrome) { /* Screen is monochrome */ }

Diğer yerlerde medya sorguları

Makalenin orijinalinin alındığı linkten diğer developerların çalışmalarına yönlendirilmiş linkleri bulabilirsiniz: Buradan.

Simenty Resmi Simülasyon Aracı : Browserstack

 

http://www.bryntum.com/wp-content/uploads/2014/06/browserstack-logo-600x315.png
Web tasarımcılarının en büyük sorunlarından birisi oluşturulan tasarımın tüm tarayıcılarda aynı şekilde görünmemesidir. Bunun başlıca nedeni yazılan Html, CSS ve Javascript kodlarının farklı şekilde yorumlanmasıdır. Oluşturduğunuz siteyi kullanan kişiler Internet Explorer, Mozilla, Chrome, Firefox, Opera, Safari hatta iOS ve Android gibi farklı tarayıcılardan sitenize erişmek isteyebilir. Bu yüzden oluşturduğunuz sitenin bu tarayıcıların hepsinde düzgün bir şekilde çalışması gerekir.
Oluşturduğunuz herhangi bir veriyi değişik tarayıcılarda test etmek gerçekten zordur.Bunun için bir çok tarayıcıda , platformda manuel test yapmak gerekir.
Browserstack ise 300’den fazla farklı tarayıcıda test etme imkanı ile farklı işletim sistemi , farklı tarayıcılar , farklı sürümlerle sitemizi test edip, ekran görüntüsünü bizimle paylaşır.
Browserstack bu alanda oldukça iyi, ancak ücretli. Denemek için ilk yarım saat ücretsiz. Ancak Browserstack kullanıcılarından aldığı ücretin karşılığını detayları dahi değerlendirişiyle hak eder. Tüm tasarımların duyarlılığını test eder. Bu sistem telefon, tablet ve Pc gibi popüler cihazları içerir ve sürekli olarak pazar eğilimleri ve değişiklerini takip ederek listesini günceller.
Küresel anlamda 30.000 den fazla müşteri tarafından güvenilmeside buradan geliyor diyebiliriz. Bunun yanında isimlerini yakından tanıdığımız Microsoft, Adobe, Wikipedia gibi müşterilerini görmek güven duygusunu arttırıyor.
Browserstack’in test özelliğinin herhangi bir kurulum ve ya yapılandırma gerektirmemesi ve sorunsuz bir şekilde test etmesi verimliliği daha da yukarılara çekiyor.