CSS3 Media Queries

CSS3 Media Queries: Responsive web siteleri için çapraz tarayıcı uyumluluğu

Günümüzde kullanılmakta olan internet teknolojilerine uygun web siteleri üretmek artık bir kural haline gelmiştir. Kullanıcıların teknolojiye olan merakını karşılamak adına geliştiriciler yeni yöntemler ile kullanıcıların bu isteklerini yanıtlamaya yönelik girişimlerini ve tüm çabalarını sarf etmektedirler. Responsive web siteleri de bunlardan biridir.

CSS3 Media Queries ile birlikte gelen Responsive özelliği web sitelerinin farklı cihaz ve ekran çözünürlüklerinde görüntülenmesi sağlayarak web dünyasında yeni bir çığır başlatmıştır. (Responsive web sitelerini buradan inceleyebilirsiniz.) Size sunacağım aşağıdaki tablo sizlere örnek olması açısından CSS3 Media sorgularını gösterecektir.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
/* Smartphones (portrait ve landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* SİTİLLERİNİZ BURADA */
}  

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* SİTİLLERİNİZ BURADA */
}  

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* SİTİLLERİNİZ BURADA */
}  

/* iPads (portrait ve landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
{
/* SİTİLLERİNİZ BURADA */
}  

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* SİTİLLERİNİZ BURADA */
}  

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* SİTİLLERİNİZ BURADA */
}  

/* Desktops ve laptops ----------- */
@media only screen and (min-width : 1224px) {
/* SİTİLLERİNİZ BURADA */
}  

/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
/* SİTİLLERİNİZ BURADA */
}  

/* iPhone 5 (portrait ve landscape)----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {
/* SİTİLLERİNİZ BURADA */
}  

/* iPhone 5 (landscape)----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
/* SİTİLLERİNİZ BURADA */
}  

/* iPhone 5 (portrait)----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {
/* SİTİLLERİNİZ BURADA */
}

Ancak, web dünyasında yeni gelen özellikler bizlere bazı zorluklar çıkarmaktadır. Bunlardan en önemlisi ve asla görmezden gelemeyeceğimiz çapraz tarayıcı özelliği.

CSS3 Media Queries, akıllı telefonlar, tablet bilgisayarlar ve diğer ekran bazlı cihazların yanı sıra Internet Explorer (IE) 9+, Firefox 3.5+, Safari 3+, Opera 7+ tarafından desteklenmektedir.

Kullanıcılar her ne kadar teknolojiye meraklı olsa bile günümüzde eski tarayıcıları kullanan birçok kişi bulunmaktadır. Kesinlikle onları görmezden gelemeyiz. Neyse ki, bu sorunun üstesinden gelebileceğimiz bir yol mevcuttur.

Birçok insan IE eski sürümlerinin kullanılmıyor olduğunu düşünse bile aslında bu düşünce yanlıştır. Dilerseniz bazı istatistiklere birlikte göz atalım.

1 Chrome 37 24.85%
2 Safari 7 10.60%
3 Firefox 32 8.03%
4 Internet Explorer 11 7.31%
5 Chrome 36 5.62%
6 Android 4 3.94%
7 Firefox 31 3.91%
8 Internet Explorer 8 3.66%
9 Internet Explorer 9 3.08%
10 Internet Explorer 10 2.34%

CSS3 Media Queries IE5, IE6, IE7, IE8 sürümü normal şartlarda desteklemez. Çapraz tarayıcı özelliği responsive web siteleri için önemlidir ve en azından IE8 de normal olarak çalışmalıdır. Şimdi sizlerle bu sorunun nasıl üstesinden gelebileceğinizi anlatacağım. Aslında kullanımı oldukça basittir.

Bunun için muhteşem bir jQuery eklentisi mevcut css3-mediaqueries. Bu önemli jQuery eklentisini indirin. İndirmiş olduğunuz dosyayı js klasörünüze  aktarın ve <head> </head> etiketleri arasına yerleştirin.

1
<script src="js/css3-mediaqueries.js"></script>

İkinci bir seçenek olarak komut dosyası alanına aşağıdaki sunduğum örnekteki gibi uygulayabilirsiniz.

1
2
3
<!-- css3-mediaqueries.js for IE less than 9 --><!-- [if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3mediaqueries.js"></script>
<![endif]-->

Eğer yukarıda verdiğim örneklerden birini kendiniz için uyarladıysanız, stil dosyanızı açarak Media sorgusunu yazmaya başlayabilirsiniz. Ancak burada verimli olabilmesi adına önemli bir noktanın üzerinde durmak istiyorum.

Dikkat etmeniz gereken şey “ekran alanında” –  “ve” – “veya” sorguları çalışmayacaktır. Media sorgusunu yazımını aşağıdaki örnekteki gibi kullanmalısınız;

1
2
3
@media screen and (min-width: 1024px;){
/*CSS kodlarınız*/
}

Şimdi farklı tarayıcılar üzerinde sayfanızı test edebilirsiniz ve final, IE8 – IE7 – IE6 ve hatta IE5 üzerinde sorunsuzca çalıştığını görebileceksiniz. 

Eğer siz kullanımını aşağıdaki örnekteki gibi uygularsanız media sorgusu çalışmayacaktır.

1
2
3
@media (min-width: 1024px;){ Bu örnek çalışmayacaktır.
/*CSS kodlarınız*/
}

Sizlerin de bu konuda herhangi bir fikri varsa yorum alanını kullanarak bizimle paylaşabilirsiniz bundan memnuniyet duyacağımızı belirtmek isterim.

Facebook Yorumları

Uyarı: Yorumlarda link kullanmayınız. Link içeren yorumlar otomatik olarak spam kabul edilmektedir.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir