Tüm Cihazlar ve Tarayıcılar için CSS Media Queries (IE7 ve IE8 dahil)

CSS3 web geliştiricileri/tasarımcıları ekran veya baskı gibi bir ortam türünü tanımlamak ve genişlik, yükseklik ya da yönelim olarak ayarlanarak koşulların içeriğinin görünümlerini belirleyebiliriz. CSS Media Queries bir ortam türünü ve web içeriğini belirli bir aygıtta nasıl gösterilebileceğini gösteren durumu birleştirmektedir.

CSS media Queries her kullanıcı türü için iyi bir deneyim sunan, farklı cihazlarda farklı stilleri sunabilmek adına mükemmel bir yoldur. CSS3 tarifname'nin bir kısmı,  CSS media Queries stillerini nasıl uygulandığını denetleyen medya niteliğinin rolünü genişletebilir. Örneğin, media=”print” belirterek web sayfasının baskı için ayrı bir stil sayfası kullanmak yıllardır yaygın bir uygulama olmuştur.

CSS media Queries geliştiricileri böylelikle ekran genişliği göre yönlendirir, aygıt gibi özelliklerin bir dizisine dayalı olan stillere hedef vererek bir sonraki seviye bu fikri alabilir. Aşağıdaki tablo eylemi sizlere tarayıcılar için CSS Media Queries sorgularını gösterir. Bir masaüstü tarayıcısı, tablet yada iPod touch görüntülendiği gibi hepsi aynı web sayfasını göstermektedir.

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* STYLES GO HERE */
}
 
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* STYLES GO HERE */
}
 
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* STYLES GO HERE */
}
 
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* STYLES GO HERE */
}
 
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* STYLES GO HERE */
}
 
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* STYLES GO HERE */
}
 
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* STYLES GO HERE */
}
 
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* STYLES GO HERE */
}
 
/* iPhone 5 (portrait & landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
/* STYLES GO HERE */
}
 
/* iPhone 5 (landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
/* STYLES GO HERE */
}
 
/* iPhone 5 (portrait)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
/* STYLES GO HERE */
}

Media Queries Desteği

CSS Media queries akilli telefonlar ve diğer ekran tabanlı cihazların yanı sıra, Internet Explorer (IE) 9+, Firefox 3.5+, Safari 3+, Opera 7+ desteklenmektedir.

CSS Media Queries IE'nin eski sürümleri desteklemiyor olmasa da, yinede onu çalıştırmanın bir yolu vardır. 

Herkes IE'nin önceki sürümlerinin kullanılmadığını düşünüyor olsa da, onları kullanan insanlar büyük bir miktarı oluşturmaktadır, bazı istatistikleri şunlardır;

Normalde IE5'ten IE8'e kadar olan sürümler CSS3 Media Query desteklemez. Ama en azından IE8 CSS3 Media Query desteklemelidir ve çapraz tarayıcı uyumu responsive web tasarımları için oldukça önemlidir. Burada CSS3 Media Query sorunlarını nasıl çözebileceğinizi anlatacağım.

İşte css3-mediaqueries denilen harika bir jQuery eklentisi. Kullanımı oldukça kolay.

jQuery Eklentisini İndirin ve </body> etiketinin üst kısmına ekleyin.

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

Yada komut dosyası eklemek adına aşağıdaki yolu kullanabilirsiniz.

1
2
3
4

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

Daha sonra stil sayfasında media sorgusunu yazarak IE kontrol edin. Hatta en eski sürümler IE5 veya IE6, IE7 ve IE8 ile oldukça güzel çalışacaktır.

NOT: 

@import’ed stylesheets üzerinde çalışmayacaktır.

Yazım ortamını bu şekilde sorgulayabilirsiniz:

1
2
3
4

@media screen and (min-width: 980px)
{
/* CSS Document */
}

Kullanılan anahtar kelime 've' sorguda ('veya' desteklemez).

Dikkat etmeniz gereken şey "ekran" gerekli görüldüğü şekilde olmalıdır.

1
2

@media (min-width: 481px) { /* ... */ } bu şekilde çalışmayacaktır.
@media screen and (min-width: 481px) { /* ... */ }

***

CSS Media Queries  kullanımı hakkında bazı fikirleriniz varsa aşağıdaki yorum alanını kullanarak fikirlerinizi sunabilirsiniz. İyi günler.