Obtenez la version d'IE à partir de l'agent utilisateur
var ie = 0;
try { ie = navigator.userAgent.match( /(MSIE |Trident.*rv[ :])([0-9]+)/ )[ 2 ]; }
catch(e){}
Comment ça marche: La chaîne de l' agent utilisateur pour toutes les versions IE comprend une partie « MSIE espace la version » ou « Trident autre texte rv espace ou deux points la version ». Sachant cela, nous récupérons le numéro de version à partir d'une String.match()
expression régulière. Un try-catch
bloc est utilisé pour raccourcir le code, sinon nous aurions besoin de tester les limites du tableau pour les navigateurs non IE.
Remarque: l'agent utilisateur peut être usurpé ou omis, parfois involontairement si l'utilisateur a défini son navigateur sur un "mode de compatibilité". Bien que cela ne semble pas être un gros problème dans la pratique.
Obtenez la version d'IE sans l'agent utilisateur
var d = document, w = window;
var ie = ( !!w.MSInputMethodContext ? 11 : !d.all ? 99 : w.atob ? 10 :
d.addEventListener ? 9 : d.querySelector ? 8 : w.XMLHttpRequest ? 7 :
d.compatMode ? 6 : w.attachEvent ? 5 : 1 );
Fonctionnement: chaque version d'IE ajoute la prise en charge de fonctionnalités supplémentaires introuvables dans les versions précédentes. Nous pouvons donc tester les fonctionnalités de manière descendante. Une séquence ternaire est utilisée ici par souci de concision, cependant if-then
et les switch
déclarations fonctionneraient tout aussi bien. La variable ie
est définie sur un entier 5-11, ou 1 pour les anciens, ou 99 pour les plus récents / non IE. Vous pouvez le mettre à 0 si vous voulez juste tester IE 1-11 exactement.
Remarque: La détection d'objets peut se casser si votre code est exécuté sur une page avec des scripts tiers qui ajoutent des polyfills pour des choses comme document.addEventListener
. Dans de telles situations, l'agent utilisateur est la meilleure option.
Détecter si le navigateur est moderne
Si vous souhaitez uniquement savoir si un navigateur prend en charge la plupart des normes HTML 5 et CSS 3, vous pouvez raisonnablement supposer qu'IE 8 et versions inférieures restent les principales applications problématiques. Tester pour window.getComputedStyle
vous donnera également un assez bon mélange de navigateurs modernes (IE 9, FF 4, Chrome 11, Safari 5, Opera 11.5). IE 9 améliore considérablement la prise en charge des normes, mais l'animation CSS native nécessite IE 10.
var isModernBrowser = ( !document.all || ( document.all && document.addEventListener ) );