Prise en charge d'IE8 pour CSS Media Query

178

IE8 ne prend-il pas en charge la requête multimédia CSS suivante:

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

Sinon, quelle est la manière alternative d'écrire? La même chose fonctionne très bien dans Firefox.

Des problèmes avec le code ci-dessous?

@import url("desktop.css") screen; 
@import url("ipad.css") only screen and (device-width:768px);
testndtv
la source
pour ceux qui veulent essayer le css en ligne avec les médias et utiliser respond (.min) .js respond ne fonctionne pas dans cette situation - il semble que cela fonctionne pour les fichiers
.css

Réponses:

77

Les versions d'Internet Explorer antérieures à IE9 ne prennent pas en charge les requêtes multimédias .

Si vous cherchez un moyen de dégrader la conception pour les utilisateurs d'IE8, vous trouverez peut-être utile les commentaires conditionnels d'IE. En utilisant cela, vous pouvez spécifier une feuille de style spécifique à IE 8/7/6 qui écrase les règles précédentes.

Par exemple:

<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]-->

Cela ne permettra pas une conception réactive dans IE8, mais pourrait être une solution plus simple et plus accessible que l'utilisation d'un plugin JS.

Aaron
la source
94
Je ne vois pas comment les feuilles de style conditionnelles résoudront un problème de conception réactive.
James Westgate
8
Je ne comprends pas comment cette solution résoudrait la conception réactive dans IE? Le chargement de différentes feuilles de style en fonction du navigateur n'avait rien à voir avec l'utilisation de différentes propriétés de style en fonction de la taille du navigateur par exemple.
Klikerko
13
Je pense que la bonne réponse est que IE8 ne prend pas en charge les requêtes multimédias . Cette réponse le dit en quelque sorte, mais ce n'est pas tout à fait clair à première vue. Quoi qu'il en soit, je pensais qu'il avait du soutien et cette réponse m'a aidé à réaliser le contraire.
Jason
54
C'est vrai que cette réponse n'est pas une solution réactive MAIS et pour moi c'est un énorme "MAIS", le fait est que IE8 n'est pas utilisé sur iPad, ni sur les tablettes Android. IE8 pourrait être utilisé sur les PC XP / Vista principalement de 2003 à 2009, des écrans d'environ 1024 px de large. Windows Mobile est sous IE6 et Windows Pone sous IE9 +. La vraie question ici est de se demander si rendre responsive pour IE8 est vraiment utile?
Gregoire D.
16
@GregoireD. Oui, ça l'est. Parce qu'il y a des gens qui consultent des pages Web avec un zoom. Dans mon entreprise, nous formalisons les pages depuis un zoom 4x en 800x600, pour l'accessibilité. Cela fait un écran d'une largeur de 400 pixels. Les requêtes multimédias sont vraiment utiles pour cela, malgré le navigateur que vous choisissez (et IE8 est inclus).
Arkana
341

css3-mediaqueries-js est probablement ce que vous recherchez: ce script émule les requêtes multimédias. Cependant (à partir du site du script) il "ne fonctionne pas sur les @importfeuilles de style ed (que vous ne devriez pas utiliser de toute façon pour des raisons de performances). N'écoutera pas non plus l'attribut media des éléments <link>et <style>".

Dans le même ordre d'idées, vous avez le plus simple Respond.js , qui permet uniquement les requêtes multimédias min-widthet max-width.

Knu
la source
7
Pourquoi n'est-ce pas étiqueté comme la réponse? Parfait pour moi merci. En passant, vous ne devriez pas utiliser de requêtes d'importation css en raison de la surcharge.
RichW
parfait, exactement ce que je cherchais!
somdow
Je vous remercie!! Cette réponse, et respond.js, m'ont fait gagner beaucoup de temps en essayant de faire une solution de contournement pour les mediaqueries dans ie8.
Ingusmat
3
Nevermind -> le .js devrait être inclus après les fichiers
.css
4
Répondre a fonctionné, mais pas css3-mediaqueries. Je suppose que c'est parce que Respond est autonome, mais css3-mediaqueries repose sur certaines fonctions jQuery telles que la détection de l'agent utilisateur et cette fonction a été obsolète et supprimée (voir la documentation jQuery).
Anton Boritskiy
50

La meilleure solution que j'ai trouvée est Respond.js, surtout si votre principale préoccupation est de vous assurer que votre conception réactive fonctionne dans IE8. Il est assez léger à 1 Ko lorsque min / gzippé et vous pouvez vous assurer que seuls les clients IE8 le chargent:

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

C'est également la méthode recommandée si vous utilisez bootstrap: http://getbootstrap.com/getting-started/#support-ie8-ie9

Brandon Pugh
la source
14

IE8 (et versions inférieures) et Firefox antérieurs à la version 3.5 ne prennent pas en charge les requêtes multimédias. Safari 3.2 le prend partiellement en charge.

Il existe des solutions de contournement qui utilisent JavaScript pour ajouter la prise en charge des requêtes multimédias à ces navigateurs. Essayez ceci:

Plugin jQuery Media Queries (ne traite que de la largeur max / min)

css3-mediaqueries-js - une bibliothèque qui vise à ajouter la prise en charge des requêtes multimédias aux navigateurs non compatibles

Faraz Kelhini
la source
Ok..Je viens d'inclure le css3-mediaqueries.js dans ma page..Il ne fonctionne toujours pas dans IE..ie la requête multimédia "@ import url (" desktop.css ") non seulement screen et (device-width: 768px); " ainsi que "@import url (" desktop.css ") not screen and (device-width: 768px);"
testndtv
Je ne sais pas si j'ai besoin de faire quelque chose de plus ... en plus d'inclure le script ..
testndtv
Veuillez noter que cela ne fonctionne pas sur les css importés. essayez ceci: <link rel = "stylesheet" type = "text / css" media = "not screen and (device-width: 768px)" href = "desktop.css" />
Faraz Kelhini
oh ok..je vois. En fait, dans ce cas, cela pourrait ne pas m'aider, car je cherche quelque chose sans rien faire sur la page..ie uniquement en externe dans le CSS ..
testndtv
Ce script googletrunk css3 js spécifie qu'il ne fonctionne qu'avec mediaquery utilisé à l'intérieur de la feuille de style CSS, plutôt qu'en externe comme «seulement écran et ....». Cela signifie que vous devez unifier vos feuilles de style en une seule et à l'intérieur, faites ce que vous vouliez faire en externe: écran @media et (max-width: 980px) {
Capagris
11

Tiré de la page du projet css3mediaqueries.js.

Remarque: ne fonctionne pas sur les feuilles de style @ importées (que vous ne devriez pas utiliser de toute façon pour des raisons de performances). N'écoutera pas non plus l'attribut media des éléments <link>et <style>.

Bayo
la source
+1 pour m'avoir dit que cela ne fonctionne pas sur les feuilles de style @ importées! Gagnez-moi beaucoup de temps sur mon thème WP enfant.
Vinicius Garcia
8

Un moyen simple d'utiliser le css3-mediaqueries-js consiste à inclure ce qui suit avant la balise body de fermeture:

<!-- 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]-->
Ben C
la source
6

Réponse modifiée: IE comprend simplement l'écran et l'impression comme support d'importation. Tous les autres CSS fournis avec l'instruction d'importation amènent IE8 à ignorer l'instruction d'importation. Le navigateur Geco comme Safari ou Mozilla n'a pas eu ce problème.

sra
la source
Mon IE n'est pas en mode de compatibilité .. Il y a aussi une autre alternative pour IE .. Fondamentalement, je veux seulement sélectionner tout sauf un périphérique d'écran de 768px ..
testndtv
Également comme indiqué sur le lien que vous avez donné, j'ai essayé de définir le doctype comme <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" " w3.org/TR/xhtml1/DTD/xhtml1-transitional. dtd "> ... Ne fonctionne toujours pas ..
testndtv
1
Je ne suis pas sûr que vous ayez raison. Vous pouvez utiliser JavaScript pour détecter la résolution de l'écran? Avec CSS, il n'y a pas d'autre moyen. Êtes-vous sûr que vous n'avez aucune erreur liée à la raison pour laquelle le min est remplacé ou ignoré. Un conseil obtenu est la barre d'outils est développeur. Avec cela, vous pouvez tester en direct sans pagereloads
sra
Le passage en mode excentrique est très rapide, avez-vous vérifié? Cela peut également conduire à des résultats indésirables. Quirkmode écrasera votre doctype. C'est aussi une pratique divine de tester exactement ce que vous voulez dans un très petit projet pour s'assurer qu'il ne s'agit pas d'une erreur / d'un résultat lié
sra
ok..Voici comment j'ai mis à jour maintenant ... J'ai common.css et à l'intérieur je dis; ... écran @import url ("desktop.css"); @import url ("ipad.css") uniquement écran et (largeur du périphérique: 768px); Je ne sais pas si cette approche est correcte, mais fonctionne pour le bureau (IE / FF) ainsi que pour l'iPad. Peut-il y avoir un problème avec cette approche?
testndtv
6

Les requêtes multimédias ne sont pas du tout prises en charge dans IE8 et les versions antérieures.


Une solution de contournement basée sur Javascript

Pour ajouter la prise en charge d'IE8, vous pouvez utiliser l'une des nombreuses solutions JS. Par exemple, Respond peut être ajouté pour ajouter la prise en charge des requêtes multimédias pour IE8 uniquement avec le code suivant:

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

CSS Mediaqueries est une autre bibliothèque qui fait la même chose. Le code pour ajouter cette bibliothèque à votre HTML serait identique:

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

L'alternative

Si vous n'aimez pas une solution basée sur JS, vous devriez également envisager d'ajouter une feuille de style IE <9 uniquement dans laquelle vous ajustez votre style spécifique à IE <9. Pour cela, vous devez ajouter le code HTML suivant à votre code:

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

Remarque :

Techniquement, c'est une autre alternative: utiliser des hacks CSS pour cibler IE <9. Elle a le même impact qu'une feuille de style IE <9 uniquement, mais vous n'avez pas besoin d'une feuille de style distincte pour cela. Je ne recommande pas cette option, cependant, car ils produisent du code CSS invalide (ce qui n'est qu'une des nombreuses raisons pour lesquelles l'utilisation de hacks CSS est généralement mal vue aujourd'hui).

John Slegers
la source
5

Avant Internet Explorer 8, les requêtes multimédias n'étaient pas prises en charge. Mais selon votre cas, vous pouvez essayer d'utiliser des commentaires conditionnels pour cibler uniquement Internet Explorer 8 et les versions antérieures. Il vous suffit d'utiliser une architecture de fichiers CSS appropriée.

user1105491
la source
4

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

Je l'ai utilisé @media \0screen {}et cela fonctionne très bien pour moi dans REAL IE8.

sgarbesi
la source
Les règles de style définies dans ce bloc ne seront appliquées que dans IE8, les autres navigateurs les ignoreront .
Luca
@Luca De plus, il ne permet pas de spécifier une largeur minimale, une largeur maximale, etc.
John Slegers
3

IE n'a pas ajouté la prise en charge des requêtes multimédias avant IE9. Donc, avec IE8, vous n'avez pas de chance.

Boris Zbarsky
la source