Internet explorer

Afficher un message en fonction de la version d’Internet explorer

Quand on regarde les statistiques d’utilisation des navigateurs, on peut remarquer que google Chrome et Mozilla Firefox sont relativement majoritaire, toutefois il ne faut pas oublier que de nombreux utilisateurs utilisent des vieilles versions de navigateurs, le plus catastrophique pour vos utilisateurs sont les vieilles versions d’Internet Explorer. Pour les avertir, vous pouvez afficher un message seulement sur ces vieux navigateurs afin qu’ils mettent à jour celui-ci ou qu’ils utilisent un autre navigateur.

Pour cela nous allons employer les commentaires conditionnels pour Internet Explorer via cet ajout dans votre header.php (ou tout autre fichier à votre convenance). L’avantage de l’insérer dans votre header et qu’il apparaîtra sur toutes les pages de votre site qui seront affichés avec un ancien navigateur.

Commencer par ajouter ces lignes à la fin de votre fichier header.php :

[pastacode lang= »markup » message= » » highlight= » » provider= »manual »]

<!-- [if (lt IE 10)]>
<div class="ie-old"> Votre navigateur n'est pas &agrave; jour et vous ne pouvez donc pas profiter de toutes les fonctionnalit&eacute;s du site. 
	Pensez &agrave; faire la <a href="http://windows.microsoft.com/fr-fr/internet-explorer/download-ie">mise &agrave; jour</a> 
	ou naviguez avec un autre navigateur : Google Chrome, Mozilla firefox ou Op&eacute;ra.
</div> 
<![endif]-->

[/pastacode]

La ligne <!– [if (lt IE 10)]> spécifie que ce message s’affichera sur toutes les versions d’Internet Explorer inférieur à Internet Explorer 10.

Un peu de style afin que le message s’affiche sur de façon plus ergonomique :

[pastacode lang= »css » message= » » highlight= » » provider= »manual »]

 /*
-------------------------------------------------
ancienne version d'internet explorer
-------------------------------------------------
*/
.ie-old{
    background-color: #666;
    box-shadow: 0 1px 3px #666;
    left: 0;
    margin: 0 !important;
    padding: 10px !important;
    position: fixed;
    text-align: center;
    text-shadow: 0 0 0 !important;
    top: 0;
    width: 100%;
    color: white;
}

[/pastacode]

Et avec ces deux petits ajouts, vous disposez maintenant d’une barre d’avertissement pour les utilisateurs ayant une vieille version d’Internet Explorer

Ajouter un fichier CSS seulement pour Internet Explorer

Tutoriel WordPress

Internet Explorer, une plaie ?

Internet Explorer est bien connu des webmasters pour être une problématique assez importante qui doit être résolu assez rapidement, pour cela vous pouvez disposer d’un fichier CSS propre à IE grâce aux conditions WordPress via les fonctions wp_register_styles() et wp_enqueue_styles().

Un fichier CSS pour IE

Pour cela ajouter ces quelques lignes de codes à votre fichier functions.php

[pastacode lang= »php » message= » » highlight= » » provider= »manual »]

add_action('wp_print_styles', 'gkp_ie_css');
function gkp_ie_css() {
	
    wp_register_style('style-ie', get_stylesheet_directory_uri() . '/style-ie.css'); 
    wp_enqueue_style('style-ie');
        
    global $wp_styles; 
    $wp_styles->add_data( 'style-ie', 'conditional', 'lte IE 7' ); // On met la condition ici !!
}

[/pastacode]

Cet ajout va rajouter ces quelques lignes à votre code :

[pastacode lang= »php » message= » » highlight= » » provider= »manual »]

[/pastacode]