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.

Etohum Ortaklığı

Etohumla olan ortaklığımız 2016 Ocaktan itibaren başladı. Etohum türkiyedeki en büyük kuluçka merkezleri ve hızlandırıcılardan bir tanesi. Bu Simenty’nin büyüyebilmesi ve daha fazla müşteriye ulaşabilmesi için paha biçilemez bir fırsat. Önümüzdeki haftalarda yeni haberlerle, bizi takip edin.

2016.etohum.com

 

12650998_737641709669088_8442339191243369096_n CZ-iSI9WkAAbFLh

Simenty artık Türkçe dilinde

http://images.lingvozone.com/languages/Language%20Information16_files/image001.gif

Kasim 1’in ilk isiklariyla birlikte sitemizin Türkçe dil destekli hali Türkçe bilen ziyaretcilerimizin kullanimina hazir olacak. Bu destegi vermemizin temel sebebi, turkiyedeki pazar ve musterilerimizin ihtiyaclari. Simenty 100’den fazla aktif site sahibine hizmet etmektedir ve bu sayi her gecen gun artmaktadir. Hedefimiz 3 ay icerisinde 1000’den fazla kullaniciya erisirken, motor kodumuzu her gecen gun daha iyi hale getirebilmek. Bize guvenebilirsiniz.

 

Geleceğin Patronları Yarışması

gelecegin patronlari image

Size gururla 829 yarismaci arasindan son 20ye kalarak yari finallerde yerimizi aldigimizi soylemek isteriz. Bu basari hayalimizi gerceklestirebilecegimize inanmamizi ve yapabileceklerimizin limitsizligini bize gostermis oldu. Finalistler 31 Ekim tarihinde belli olacak.

 

Startup Istanbul 3.gun sonlandı

Simenty olarak girisimimizi StartupIstanbulun 3.gununde tanittik. Diger startuplardan, yatirimcilardan ve hizlandiricilardan (kulucka merkezleri vb) ilginc ve faydali geridonusler aldik. Bu tur insanlarin arasinda olmak bizim acimizdan pahabicilemez bir tecrubeydi ve orada edindigimiz baglantilardan gurur duyuyoruz.
Sizden de duymak isteriz, takipte kalin!

Heyacanımızı paylaşın

Heyecanimizi paylaş!
Bizi Twitter ve Facebook hesaplarimizi takip ederek destekle. Herkese mukemmel mobil site!

Simenty Motoru Beta

Simenty Motoru Beta
Sizlere aylar suren planlama, arastirma, dizayn maratonlari, ve yuzlerce redbullar sonunda Simenty Motoru’nun acik beta oldugunu duyurmaktan mutluluk duyuyoruz!
Aslinda motoru daha onceden cikarmak istiyourduk ancak Startup Istanbul hazirligi ve detayli tartismalar sonucunda motoru gelistirip yeni ozellikler ekledikten sonra cikaralim dedik. Yeni ozellikler ve gelistirmeler asagidaki gibi:
– Eski browserlarla uyumluluk (IE dahil :))
– Simenty urunu Responsive mobil site
– Otomatik menu bari yaratimi
– Daha ileri ve guclu Javascript algoritmalari
– Ve her zamanki kucuk hatalar ve sorunlarin cozumleri.
Yakinda dahasiyla, bizimle kalin!