‘iPhone’ etiketi için sonuçlar

CSS 3 medya sorguları

Eylül 2nd, 2011 • 1 yorum CSS
Etiketler: , , , , ,

Mobil sektörün hızla ilerlemesi ve akıllı araçlar pazarının büyümesi ile insanlar mobil araçlar için ayrı web siteleri yapmaya başladı ve bu şekilde devam ediyor. Web sitesi olan bir şirketin mobil için ayrı bir site yapması gerek iş ve gerekse düzenleme açısından sorunları olan bir sistem.  Medya sorguları bu anlamda bir ihtiyaç için ortaya çıkmış bir özelliktir.

Herkesin istediği bir özellik olarak her çözünürlükte ve araçta uygun web siteleri üretmektir. Bunun için medya sorguları bize yardım sağlar.

Daha önce medya sorgularını yazıcıdan çıktı alırken web sitelerimizin çıktı almaya müsait hale getirmek için kullanmıştık. CSS3 ile birlikte medya sorgularında kullanabileceğimiz medya özellikleri eklendi.

Yeni nesil medya sorgularını Firefox, Webkit, Opera ve İnternet Explorer9’dan itibaren desteklemektedir. İnternet Explorer’un eski sürümler için javascript ile çözüm üretilir.

Daha önceki makalemde bahsettiğim gibi medya sorgularının en basit hali

<link rel="stylesheet" media="screen" href="ornek.css">

veya

@media ornek.css screen;

şeklindedir.

Medya sorguları bir veya daha fazla tipe göre sorgulama yapar ve sorgunun doğruluğuna göre o css dosyasını uygular.

Medya Tipleri

screen Bilgisayarda görüntüleme
tty Bilgisayar terminalleri ve eski taşınabilir araçlar ile görüntüleme
tv Televizyonda görüntüleme
projection Projeksiyonda görüntüleme
handheld Taşınabilir telefonlar ve PDA’ler
print Yazıcı çıktılarında görüntüleme
braille Braille dokunsal okuyucularda
all Tüm araçlarda görüntüleme
embossed Braille yazıcı çıktıları için
aural Ses sentez birimlerinde kullanılır

Mantıksal Operatörler

Medya sorgularımızda not, and ve only mantıksal operatörlerini kullanabiliriz.

and
İki veya daha fazla medya özelliğini birbirine bağlar. Sorgudaki tüm medya özelliklerinin doğru olması durumunda css dokümanın uygulanmasını sağlar. Örneğin (color) and (orientation: landscape) and (min-device-width: 800px) tanımı; Görüntüleyen aracın renkli, yatayda ve en az 800px genişliğinde ise css dokümanı uygulanır.

@media (min-width:450px) and (max-width:950px)

Bu durumda ise; genişliği en az 450px ve en fazla 950px olan araçlarda uygulanır.

not
Sorguya negatif ifade katar. Sonuç eğer doğru ise css dosyası uygulanmaz.

@media not screen and (color)

Bilgisayar ve renkli ekran olmayan durumlarda uygulanır.

only
Sadece bu şartlar geçerli olduğunda uygula anlamınadır.

@media only screen and  (color) {
    body {background:blue}
}

Sadece bilgisayar ve renkli ekranlar olduğunda css dokümanı uygulanır.

Yukarıdaki operatörlerde dikkat etti iseniz şöyle bir kural var. İlk parametre medya tipini gösteriyor sonra operatör ve ikinci parametre medya özelliği tanımlanıyor. Medya özellikleri parantez içinde tanımlanıyor.

@media screen and (ozellik:deger) { }

Birden fazla sorgu

Birden fazla medya tipi için virgül ile birden fazla sorgu yapabiliyoruz.

@import url(print-color.css) print and (color), projection and (color);

Sorgulardan biri geçerli ise print-color.css dokümanı uygulanır. Renkli yazıcı veya renkli projektörden birisi ile açılırsa print-color.css uygulanır.

Medya Özellikleri

Medya özellikleri web sitesini gösteren aracın bilgileri ile sorgu yapmamızı sağlayan özelliklerdir; boyutları, araç boyutları, çözünürlüğü ve daha fazlası. Bu özellikler sorgu ifadesi olarak kullanılır, eğer bu sorgu doğru ise, yani araç bu özelliğe sahip ise css dosyası gösterilir, değilse gösterilmez. Örneğin 480px genişlikteki ekranlar için bir tanım yapmış olalım, sonuçta 480px genişliğe sahip araçlarda görüntülenecektir.

Yukarıdaki örneklerde görüldüğü gibi medya sorgularında medya özellikleri parantez için tanımlanmaktadır. Genel kullanım;

@media media and (ozellik:deger) { }

Genelde kullanılan medya özelliklerini inceleyelim.

width, height, max-width, min-width, max-height ve min-height

Genişlik(width) değeri web sitesinin görüntüleyen aracın genişliğine göre tanım yapmamızı sağlar. Buradaki genişlik tarayıcının(kaydırma çubukları dahil) genişliğine eşittir. 

@media screen and (width:480px) { }

Yukarıdaki tanım 480px genişlikte görüntülemede uygulanacaktır.

Genişlik tanımının ayrıca iki adet önekli kullanımlarıda mevcuttur. max- ve min- ön ekleri ile sabit bir değeri değilde belli bir değer aralığını kontrol edebilme imkanına sahibiz.

@media screen and (max-width:480px) { }

ve

@media screen and (min-width:680px) { }

İlk örnekte genişliği en fazla 480px olana kadar uygulanır, ikinci örnekte ise genişliği en az 680px olan tarayıcı genişliklerinde uygulanır. Bilgisayarımızda tarayıcı genişliği ile oynayarak bu örnekleri test edebiliriz.

Yükseklik değerleride(max-height ve min-height) benzer şekilde çalışır.

device-width, max-device-width, min-device-width, device-height, max-device-height ve min-device-height

Aygıt genişliği yukarıdaki genişlik gibi çalışır, ancak farklı olarak bu genişlik aygıtın genişliğini tanımlar. Genişlik değerinde olduğu gibi aygıt genişliği tanımlarındada max- ve min- ön ekleri vardır. Kullanımı benzerdir

@media media and (device-width:1024px) { }
@media media and (max-device-width:320px) { }
@media media and (min-device-width:800px) { }

Mobil araçlar için web sitesi geliştirirken bize çok yardımı dokunur bu özelliğin mesela iPhone için web sitemizi uyarlamak istediğimizde işimize yarar.

/* iphone */
@media screen and (max-device-width: 480px) {
	body {
		background: #f00;
	}
}

şeklinde iphone kullanıcılarını yakalayabiliriz. Bilgisayarımızda tarayıcı genişliği ile bu sonuca erişemeyiz. Örneği görmek için iphone simülatör veya gerçek iphone’da bu örneği test etmelisiniz.

Benzer şekilde device-height, max-device-height ve min-device-height özellikleride kullanılabilir.

orientation

Uyarlayacağımız aracın yatay veya dikey olması durumuna göre davranış sergileme imkanı veren medya özelliğidir.

Tablet bilgisayarlar için genelde tercih edilir. iPad için site geliştirirken dikkate almalıyız. 

@media screen and (orientation: portrait) { }

İki değer almaktadır; landscape veya portrait. landscape değeri tarayıcınızın genişliği yüksekliğinden büyük ise uygulanır, portrait değeride tam tersi durumlarda.

Tarayıcınızın genişliği ile oynayarak sonucu görebilirsiniz. iPad’de daha çok yatay kullanımda daha geniş yer varken site tam gösterilirken dikey kullanımda gizlenmesi gibi durumlarda kullanılabilir. Hatta menü yatayda açık dikeyde bir butona tıklayınca açılır şekilde kodlanabilir.

aspect-ratio, min-aspect-ratio, max-aspect-ratio, device-aspect-ratio, min-device-aspect-ratio ve max-device-aspect-ratio

Belirli bir genişlik yükseklik oranı ile sorgu oluşturmamızı sağlar. Boyut tanımlarında olduğu gibi tarayıcı oranı ve araç oranı diye farklı kullanımları vardır. Benzer şekilde max- ve min- önekleri ile kullanımıda mevcuttur.

16:9 sinematik ekran oranı için bir sorgu oluşturulabilir. Üreticileri ürettiği farklı oranlar(16:10, 15:10 vb.) için sorgular oluşturulup bu araçlar için web sitesi yapmak daha kolay hale getirilebilir.

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

pixel-ratio

Piksel oranı üzerinden sorgular üretmemizi sağlayan medya özelliğidir. Masaüstü tarayıcılarda pek kullanılmasa da mobil araçlarda sıkça kullanılan büyütme işleminde resimlerde sorunlara neden olmaktadır. Bu sorunu çözmek için resimlerimizin iki farklı halini oluşturup yakınlaştırma yapıldığında daha yüksek piksel oranlarına sahip araçlarda daha büyüğünü göstererek resmin bozulma sorununu ortadan kaldırabiliriz.

Farklı tarayıcılarda farklı önek ile uygulanmaktadır. webkit için -webkit-device-pixel, max-webkit-device-pixel, min-webkit-device-pixel

Firefox için -moz-device-pixel-ratio, min–moz-device-pixel-ratio, max–moz-device-pixel-ratio şeklinde uygulanır.

div { background-image: url('image-dusuk.png'); }
	@media screen and (-webkit-min-device-pixel-ratio: 2) {
	background-image: url('image-yuksek.png');
	background-size: 100% 100%;
}

Şeklinde uygulanır. iPhone4 ile ön plana çıkan bu özellik yardımı ile iPhone4 ayrımıda yapılabilir.

/* iphone 4 */</li>
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	background-image:url(yuksek_cozunurluklu_resim.png);
}

Bu medya özelliklerinin dışında color, min-color, max-color, color-index, min-color-index, max-color-index, monochrome, min-monochrome, max-monochrome, resolution, min-resolution, max-resolution, scan, grid medya özellikleride vardır. Ayrıca Firefox mobile için tanımladığı kendine ait medya özellikleride bulunmaktadır. Bu medya özellikleri hakkındaki detaylı bilgiye https://developer.mozilla.org/en/CSS/media_queries sitesinden erişebilirsiniz.

Tarayıcı Desteği
Google Chrome 5+
Safari 3.2(kısmen) 4(tam)+
Firefox3.6+
Opera 10.6+
İnternet Explorer 9+
Mobil Tarayıcılar
Android 2.1+
Firefox mobile +
Opera Mini 5+
iOS 3.2+

Bu tabloya bakarak ie’nin önceki sürümleri için çözüm üretmeliyiz. Javascript yardımı ile yapılmış çeşitli yöntemler mevcut, ben jquery ile yapılan yöntemi çalıştırabildim açıkçası.

http://protofunc.com/scripts/jquery/mediaqueries/

Bu sitedeki scripti sitenize eklediğinizde ie’nin eski sürümleri ile olan sorununuz çözlüyor.

<link rel="stylesheet" type="text/css" href="ana.css" media="only screen and (max-width: 480px)" />
<!--[if lt IE 9]>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="jquery.mediaqueries.js" type="text/javascript"></script>
<![endif]-->

IE9 öncesi tarayıcılar için böyle bir ekleme yaparak sorunu çözebiliriz.

Ayrıca sadece javascript ile ie’nin eski sürümleri için üretilen Javascript çözümlerini uyguladığımda çalışmadı bilemiyorum sorun bende mi ama olmadı.

Kaynaklar

CSS İpucu 22: iPhone için CSS Yazmak

Temmuz 22nd, 2009 • 21 yorum CSS
Etiketler: ,

apple-iphoneGelişen ve yaygınlaşan mobil cihazlar bizlere bir mecra daha açacağa benziyor. Gelecekte etkisini daha çok hissettirecek cep telefonu vb. ürünlerden internete girme isteği. Şimdilerde kendini gösteriyor. Benim size burada bahsedeceğim ipucu küçük ama kullanışlı bir ipucu olacaktır.

Bir kaç sitede gördükten sonra ve bende bir iphone projesine başlayacak olmamdan dolayı buraya eklemeyi uygun gördüm. Daha önce çıktı almak için(print) benzer bir yapıyı kullanmıştık.

Kodumuz çok basit

<!--[if !IE]>–>
<link media="only screen and (max-device-width: 480px)" href="iPhone.css" type="text/css" rel="stylesheet" />
<!–<![endif]–>

veyahut

@media only screen and (max-device-width: 480px) {
  body {color:#000;}
}

şeklinde bir tanımlamada yapabiliyoruz. İlk koddaki ie şartlı koşulu bazı eski ie sürümlerinde bu kodu algılama durumu içindir.

Yukarıdaki tanımlar sadece iPhone’da görünecektir. İşin püf noktasını max-device-width: 480px kısmı oluşturuyor.

Kaynaklar

24 Temmuz 2008 web’den seçme haberler

Temmuz 24th, 2008 • 5 yorum Haberler
Etiketler: , , , , , , , , , ,

  • CSS ile Bar Yapımı – aorgun.net Bağlantı
  • Yeni bir jQuery link derlemesi. Bağlantı
  • Outlook ve Gmail karşılaştırması. Bağlantı
  • Google chart api’nin gücü – yazilan.org Bağlantı
  • İnternet Explorer 6 sorunları nedeni ile web kod yazarlarını zorluyor. Bunun farkında olan firmalar tek tek ie6′dan vazgeçiyor. Bağlantı
  • PSD’den XHTML çeviri yapmayı anlatan 20 link derlemesi. Bağlantı
  • WordPress iPhone sürümünü çıkardı. Bağlantı
  • jQuery ile geçiş efektli içerikler oluşturmak. Bağlantı
  • İnternet Explorer Yazı tipi(Font) gömme yöntemine destek arıyor. Farklı yazı tiplerini kullanmak bir sorun ve hala gerçek bir çözüm üretilemedi. Bağlantı
  • WordPress’i Neden Seviyorum? – webdeneyimleri.com Bağlantı
  • Firefox 3.1 ile birlikte CSS3′ün bazı özelliklerini desteklemeye başlayacak. Bağlantı
  • CSS yardımı ile arama motorlarında yükselmek için 4 yöntem. Bağlantı
  • Küçük ekranlı araçlar için web sitesi kodlamanın ipuçları. Bağlantı

Kategoriler

Kitap

CSS'e başlangıç Uzun süredir üzerinde çalıştığım CSS’e başlangıç kitabımı bitirdim. Aslında buna bir kitap demek ne kadar doğru bilmiyorum. Tam doğru tanımı makalelerimin derlenip düzenli hale getirildiği bir e-doküman demek daha doğru olur. Bu kitap makalelerimi derleyip hazırladığım ilk kitap. İnşallah ikinci kitabıda yazmayı düşünüyorum. Zaman ve imkânlar nispetinde 2. kitapta çıkacaktır.