CSS Ortam Sorgusu için IE8 desteği

IE8 aşağıdaki CSS medya sorgusunu desteklemiyor mu?

@import url("desktop.css") screen and (min-width: 768px);

Değilse, alternatif yazma yolu nedir? Aynı şey Firefox'ta da işe yarıyor.

Aşağıdaki kodla ilgili herhangi bir sorun mu var?

@import url("desktop.css") screen; 
@import url("ipad.css") only screen and (device-width:768px);

IE9'dan önceki Internet Explorer sürümleri medya sorgularını desteklemez .

Eğer bir yolu arıyorsanız aşağılayıcı IE8 kullanıcıları için tasarım, IE'nin koşullu yararlı yorumlama bulabilirsiniz. Bunu kullanarak, önceki kuralları yazan bir IE 8/7/6 belirli stil sayfası belirtebilirsiniz.

Örneğin:

<link rel="stylesheet" type="text/css" media="all" href="style.css"/>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ie.css"/>
<![endif]-->

Bu, IE8'de duyarlı bir tasarıma izin vermez, ancak bir JS eklentisi kullanmaktan daha basit ve daha erişilebilir bir çözüm olabilir.

css3-mediaqueries-js muhtemelen aradığınız şeydir: bu komut dosyası medya sorgularını taklit eder. Ancak (komut dosyasının sitesinden) " @imported stil sayfalarında çalışmaz (performans nedenleriyle hiçbir şekilde kullanmamalısınız). Ayrıca <link>ve <style>öğelerinin medya özniteliğini dinlemez ".

Aynı şekilde , yalnızca ve medya sorgularını etkinleştiren daha basit Respond.js'ye sahipsiniz .min-widthmax-width

Bulduğum en iyi çözüm, özellikle asıl endişeniz duyarlı tasarımınızın IE8'de çalıştığından emin olmaksa Respond.js . Min / gziplendiğinde 1kb'de oldukça hafiftir ve yalnızca IE8 istemcilerinin yüklediğinden emin olabilirsiniz:

<!--[if lt IE 9]>
<script src="respond.min.js"></script>
<![endif]-->

Bootstrap kullanıyorsanız da önerilen yöntem budur: http://getbootstrap.com/getting-started/#support-ie8-ie9

IE8 (ve daha düşük sürümler) ve 3.5'ten önceki Firefox medya sorgusunu desteklemez. Safari 3.2 kısmen destekliyor.

Bu tarayıcılara medya sorgusu desteği eklemek için JavaScript kullanan bazı geçici çözümler vardır. Bunları dene:

Medya Sorguları jQuery eklentisi (yalnızca maksimum / dk genişlikle ilgilenir)

css3-mediaqueries-js - desteklemeyen tarayıcılara medya sorgusu desteği eklemeyi amaçlayan bir kütüphane

Css3mediaqueries.js proje sayfasından alınmıştır.

Not: @ import'ed stil sayfalarında çalışmaz (performans nedenleriyle hiçbir şekilde kullanmamalısınız). Ayrıca <link>ve <style>öğelerinin medya özniteliğini dinlemez .

Css3-mediaqueries-js kullanmanın kolay bir yolu, kapanış gövdesi etiketinden önce aşağıdakileri eklemektir:

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

Düzenlenmiş cevap: IE, yalnızca ekran ve yazdırmayı içe aktarma ortamı olarak algılar. İçe aktarma ifadesiyle birlikte verilen diğer tüm CSS'ler IE8'in içe aktarma ifadesini yok saymasına neden olur. Safari veya Mozilla gibi Geco tarayıcılarında bu sorun yoktu.

Medya sorguları IE8 ve önceki sürümlerde hiç desteklenmez.

Javascript tabanlı bir geçici çözüm

IE8 için destek eklemek için birkaç JS çözümünden birini kullanabilirsiniz. Örneğin, IE8 için medya sorgusu desteği eklemek üzere Yanıtla yalnızca aşağıdaki kodla eklenebilir:

<!--[if lt IE 9]>
<script 
   src="respond.min.js">
</script>
<![endif]-->

CSS Mediaqueries de aynı şeyi yapan başka bir kütüphanedir. Bu kütüphaneyi HTML'nize eklemek için kullanılan kod aynı olacaktır:

<!--[if lt IE 9]>
<script 
   src="css3-mediaqueries.js">
</script>
<![endif]-->

Alternatif

JS tabanlı bir çözümden hoşlanmıyorsanız, stilinizi IE <9'a özgü ayarladığınız bir IE <9 yalnızca stil sayfası eklemeyi de düşünmelisiniz. Bunun için kodunuza aşağıdaki HTML'yi eklemeniz gerekir:

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ielt9.css"/>
<![endif]-->

Not :

Teknik olarak bir alternatif daha var: IE <9'u hedeflemek için CSS kesmek kullanmak . Yalnızca IE <9 stil sayfası ile aynı etkiye sahiptir, ancak bunun için ayrı bir stil sayfasına ihtiyacınız yoktur. Gerçi, bu seçeneği önermiyorum, çünkü geçersiz CSS kodu üretiyorlar (CSS hack'lerinin kullanımının genellikle bugün kaşlarını çatmasına neden olan birkaç nedenden biri).

Internet Explorer 8'den önce Medya sorguları için destek yoktu. Ancak durumunuza bağlı olarak, yalnızca Internet Explorer 8 ve daha düşük sürümlerini hedeflemek için koşullu yorumları kullanmayı deneyebilirsiniz. Sadece uygun bir CSS dosya mimarisi kullanmanız gerekir.

http://blog.keithclark.co.uk/wp-content/uploads/2012/11/ie-media-block-tests.php

Ben kullandım @media \0screen {}ve REAL IE8 benim için iyi çalışıyor.

IE, IE9'a kadar medya sorgu desteği eklemedi. Yani IE8 ile şansınız kalmadı.