Prise en charge d'IE8 pour CSS Media Query

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);

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.

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.

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

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

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

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

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.

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).

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.

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.

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.