Activer le support des media queries pour Internet Explorer 8

Si vous utilisez un thème WordPress dit responsive design il vous faut vérifier que ce dernier s’affichera correctement dans les anciens navigateurs tels que Internet Explorer 8 qui n’offraient pas le support des media queries apportées par CSS3. Le recours à respond.js va nous permettre d’offrir une rétrocompatibilité sans trop de dégradations visuelles.

La première question qui vous vient probablement à l’esprit en lisant l’introduction : pourquoi diable offrir une rétrocompatibilité pour des navigateurs qui ne sont plus supportés ? Tout simplement parce que de nombreuses entreprises multinationales et des administrations publiques utilisent encore Internet Explorer. Ce faible pourcentage ne doit pas être négligé si vous ciblez ces derniers.

En matière de e-commerce, aucun consommateur ne doit être exclu : que diriez-vous si on vous refusez l’accès à une boutique de mobile sous prétexte que vous n’utilisez pas de smartphone ? C’est la même chose ici. Vous devez accueillir le maximum de visiteurs sur votre site.

Pour cela, nous allons commencer par détecter les visiteurs qui utilisent une version antérieure à IE 9. Ensuite, nous chargerons le script respond.js que vous aurez préalablement téléchargé à partir de ce lien puis déposé dans le répertoire adéquat – en l’occurrence dans /inc/js/ :

Respond.js

Un script JS pour prendre en charge les media queries CSS3 pour les navigateurs Web non compatibles.

Taille : 4,5 KiB  •  Date : 29 mars 2015 •  Hits : 270

Notez qu’il est également envisageable d’utiliser une URL du script hébergée sur un CDN. Toutefois, respond.js présente l’avantage d’être très léger.

Ouvrez maintenant votre fichier functions.php ou équivalent et collez le code suivant.

/* Media Queries Rétrocompatibilité */
function wpc_media_queries_ie() {
	global $is_IE;
		if ($is_IE)
		echo '<!--[if lt IE 9]><script src="'.get_template_directory_uri().'/inc/js/respond.min.js"></script><![endif]-->';
}

add_action('wp_head', 'wpc_media_queries_ie');

Testez le résultat en lançant Internet Explorer. Appuyez sur F12 pour afficher les outils de développement. Rendez-vous dans l’onglet Émulation puis changez pour Internet Explorer 8 (attention il y a 2 variables à modifier).

Visuellement, le site devrait ressembler à quelque chose qui tient davantage la route (si par cas le thème ne supportait pas de rétrocompatibilité) et techniquement, respond.js doit s’afficher dans votre code source.

Cette manipulation relativement simple vous aura permis d’améliorer le potentiel de visites en quelques lignes de code. Pratique, non ? Adepte de cette méthode ou d’une autre solution ?

2 commentaires

  1. jean christophe

    Bonjour, j’ai une petite question s’il vous plait, je me renseigne avant de créer mon site avec je pense wordpress, que pensez-vous du plugin Visual Composer pour la mise en page de codecanyon, je vous remercie pour vos tutoriels et astuces toujours très professionnel.

Laisser un commentaire

Thèmes & Plugins
Premium By WP Channel

WP Alacarte propose des produits et services de qualité
made in France pour la plateforme WordPress.

Tout est prêt pour créer votre site à la carte !

  • Thèmes et extensions premium
  • Facilité d’utilisation garantie
  • Temps de chargement optimisé
  • Personnalisation avancée
Découvrir

Rejoignez la communauté WordPress !

Faites partie de l’aventure en devenant membre d’une association WordPress. Conférences, ateliers, BarCamp, WordCamp… Venez
partager votre passion pour WordPress !

Aurélien DENIS,
président des associations WordPress Francophone et WPMX