web-dev-qa-db-fra.com

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

Si non, quelle est la manière alternative d'écrire? La même chose fonctionne 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);
htmlcssresponsive-designinternet-explorer-8media-queries
178
testndtv

Versions Internet Explorer antérieures à IE9 ne prend pas en charge les requêtes de média.

Si vous cherchez un moyen de dégrader le design pour les utilisateurs d'IE8, vous pouvez trouver les commentaires conditionnels d'IE utiles. Vous pouvez ainsi utiliser 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 constituer une solution plus simple et plus accessible que l’utilisation d’un plugin JS.

77
Aaron

css3-mediaqueries-js est probablement ce que vous recherchez: ce script émule les requêtes multimédia. Cependant (d'après le site du script), il "ne fonctionne pas sur les feuilles de style _@import_ (que vous ne devriez en aucun cas utiliser pour des raisons de performances). De plus, il n'écoutera pas l'attribut multimédia de _<link>_ et _<style>_ éléments ".

Dans le même ordre d'idées, vous avez le plus simple Respond.js , qui active uniquement les requêtes média _min-width_ et _max-width_.

341
Knu

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/gzipped 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

50
Brandon Pugh

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

Certaines solutions de contournement utilisent JavaScript pour ajouter un support de requête multimédia à ces navigateurs. Essayez ces:

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

css3-mediaqueries-js - une bibliothèque qui vise à ajouter un support de requête multimédia aux navigateurs non compatibles

14
Faraz Kelhini

Extrait de la page du projet css3mediaqueries.js.

Note: Ne fonctionne pas sur les feuilles de style @ importées (que vous ne devriez en aucun cas utiliser pour des raisons de performances). N'écouterez pas non plus l'attribut média des éléments <link> et <style>.

11
Bayo

Un moyen simple d'utiliser css3-mediaqueries-js consiste à inclure les éléments suivants avant la balise de fermeture du corps:

<!-- 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]-->
8
Ben C

Réponse modifiée: IE ne comprend que l'écran et l'impression en tant que support d'importation. Tous les autres CSS fournis avec l'instruction d'importation obligent IE8 à ignorer l'instruction d'importation. Les navigateurs Geco comme Safari ou Mozilla n’avaient pas ce problème.

6
sra

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

Solution de contournement basée sur Javascript

Pour ajouter le support pour IE8, vous pouvez utiliser l’une des solutions JS proposées. Par exemple, Respond peut être ajouté pour ajouter la prise en charge de la requête multimédia 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 code 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 devez é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 alternative supplémentaire: utiliser hacks CSS pour cibler IE <9. Cela 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. Toutefois, je ne recommande pas cette option, car ils produisent un code CSS non valide (ce qui n’est qu’une des nombreuses raisons pour lesquelles l’utilisation de hacks CSS est généralement mal vue de nos jours).

6
John Slegers

Avant Internet Explorer 8, les requêtes de média 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 versions antérieures. Vous devez juste utiliser une architecture de fichiers CSS appropriée.

5
user1105491

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

J'ai utilisé @media \0screen {} et cela fonctionne bien pour moi dans REAL IE8.

4
sgarbesi

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

3
Boris Zbarsky