Aujourd’hui, un court article de veille technique. J’ai trouvé cette fonction Javascript de détection du navigateur sur Stack Overflow. Je la partage ici car elle me semble utile pour régler un problème de compatibilité entre navigateurs, sujet cher aux webdesigners et intégrateurs web.
J’avais justement une différence de rendu entre navigateurs sur l’intégration d’un site utilisant deux plugins jQuery :
- stellar.js (voir ici) pour ajouter un effet parallax à certains éléments du site, dont plusieurs arrière-plans. Je recommande d’ailleurs ce plugin, plutôt facile à mettre en place, il est beaucoup utilisé et on trouve donc un bon support sur le web.
- scrollReveal.js pour l’ajout d’animations aux éléments HTML au fur et à mesure de leur apparition dans la page. C’est un plugin dont j’ai déjà parlé sur ce blog (voir ici.
L’intégration fonctionnait bien sur Firefox et Internet Explorer, mais le chargement se faisait différemment sous Safari et Chrome. J’ai donc dû appeler les fonctions d’instanciation des plugins d’une autre manière pour ces deux navigateurs.
Il me fallait détecter le navigateur au chargement, j’ai donc utilisé cette fonction trouvée sur Stack Overflow, je la partage ici :
// Opera 8.0+
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
// Firefox 1.0+
var isFirefox = typeof InstallTrigger !== 'undefined';
// At least Safari 3+: "[object HTMLElementConstructor]"
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
// Internet Explorer 6-11
var isIE = /*@cc_on!@*/false || !!document.documentMode;
// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;
// Chrome 1+
var isChrome = !!window.chrome && !!window.chrome.webstore;
// Blink engine detection
var isBlink = (isChrome || isOpera) && !!window.CSS;Elle retourne chacune des variables true ou false selon le navigateur utilisé, rien de plus simple à réutiliser dans son code Javascript pour un intégrateur web.