Prise en charge d’IE8 pour CSS Media Query

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

Si vous recherchez un moyen de dégrader la conception pour les utilisateurs d’IE8, vous pouvez trouver les commentaires conditionnels d’IE utiles. Avec ceci, vous pouvez spécifier une feuille de style spécifique à IE 8/7/6 qui écrase les règles précédentes.

Par exemple:

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

css3-mediaqueries-js est probablement ce que vous recherchez: ce script émule les requêtes média. Cependant (à partir du site du script), il “ne fonctionne pas sur les feuilles de style @import ed (que vous ne devriez pas utiliser pour des raisons de performances). @import pas non plus l’atsortingbut media des éléments et

".

Dans le même ordre d'idées, vous disposez du Respond.js plus simple, qui n'autorise que les requêtes média min-width et 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 responsive fonctionne dans IE8. Il est assez léger à 1kb quand min / gzipped et vous pouvez vous assurer que seuls les clients IE8 le chargent:

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

IE8 (et versions inférieures) et Firefox avant la version 3.5 ne prennent pas en charge la requête multimédia. Safari 3.2 le supporte partiellement.

Il existe des solutions de contournement qui utilisent JavaScript pour append un support de requête multimédia à ces navigateurs. Essayez ces:

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

css3-mediaqueries-js – une bibliothèque qui vise à append la prise en charge des requêtes de média aux navigateurs non compatibles

Tiré de la page du projet css3mediaqueries.js.

Note: Ne fonctionne pas sur les feuilles de style imscopes (que vous ne devriez pas utiliser pour des raisons de performances). N’écoutera pas non plus l’atsortingbut media des éléments et

.

Une manière simple d’utiliser css3-mediaqueries-js est d’inclure les éléments suivants avant la balise de fermeture:

Réponse modifiée: IE ne comprend que le filtrage et l’impression en tant que support d’importation. Tout autre fichier CSS fourni avec l’instruction import entraîne IE8 à ignorer l’instruction d’importation. Le navigateur Geco comme Safari ou Mozilla n’avait pas ce problème.

Les requêtes multimédias ne sont pas sockets en charge dans IE8 et les versions ultérieures.

Une solution de contournement basée sur Javascript

Pour append un support pour IE8, vous pouvez utiliser l’une des solutions JS. Par exemple, Respond peut être ajouté pour append le support de requête de média pour IE8 uniquement avec le code suivant:

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

L’alternative

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

Remarque :

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

Avant Internet Explorer 8, il n’existait aucune prise en charge des requêtes multimédia. Mais selon votre cas, vous pouvez essayer d’utiliser des commentaires conditionnels pour cibler uniquement Internet Explorer 8 et versions ulté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

J’ai utilisé @media \0screen {} et cela fonctionne très bien pour moi dans IE IE8.

IE n’a pas ajouté de support de requête média jusqu’à IE9. Donc, avec IE8, vous n’avez pas de chance.