Vous avez décidé d'arréter le support des vieux navigateurs pour pouvoir profiter des nouvelles fonctionnalités des derniers navigateurs. Outdated browser va vous permettre d'afficher un message pour informer vos utilisateurs sans vous prendre la tête.
L'installation est assez simple. Il faut commencer par charger le CSS et le JS lié à outdated browser en le téléchargeant depuis leur dépôt github.
On charge ensuite ces 2 ressources dans notre HTML
<head>
<!-- ... -->
<link rel="stylesheet" href="outdatedBrowser.min.css">
</head>
<body>
<!-- ... -->
<script src="outdatedBrowser.min.js"></script>
</body>Il faut ensuite créer une div qui va accueillir le message d'alerte.
<body>
<!-- La div outdated -->
<div id="outdated"></div>
</body>Et enfin, on déclenche la détection en rajoutant dans notre code JS
// Attention à bien attendre que le DOM soit chargé avant
outdatedBrowser({
bgColor: '#f25648',
color: '#ffffff',
lowerThan: 'transform',
languagePath: 'outdatedbrowser/lang/en.html'
})Et voila ! vous devriez voir le message s'afficher si vous essayez de charger le site sur un vieux navigateur (comprendre IE 9 ou inférieur).
Comme vous l'aurez compris avec le code javascript précédent il est possible de configurer le fonctionnement d'outdated browser.
languagePath
La première chose à configurer, c'est le message à afficher. Vous l'aurez remarqué, on a une option languagePath qui contient le chemin vers un fichier HTML. De nombreuses langues sont incluses dans le plugin du coup il vous faudra seulement adapter le chemin à votre application.
Si vous ne souhaitez pas utiliser de l'Ajax pour le chargement du message vous pouvez le mettre directement dans le code HTML dans la div#outdated. Dans ce cas là il faudra laisser l'option languagePath vide.
lowerThan
Cette option vous permet de gérer le niveau de détection (à partir de quelle version on n'affiche plus le message). Vous pouvez indiquer cette version de 2 mannières, soit en précisant la version, soit en indiquant qu'elle fonction vous souhaitez utiliser.
color & bgColor
Là je ne pense pas qu'il y est besoin de plus d'explications ^^