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