Ottieni la versione IE dall'Utente-Agente
var ie = 0;
try { ie = navigator.userAgent.match( /(MSIE |Trident.*rv[ :])([0-9]+)/ )[ 2 ]; }
catch(e){}
Come funziona: La stringa user-agent per tutte le versioni di IE include una parte "MSIE spazio la versione " o "Trident altro testo rv spazio-o-colon versione ". Sapendo questo, prendiamo il numero di versione da String.match()
un'espressione regolare. Un try-catch
blocco viene utilizzato per abbreviare il codice, altrimenti avremmo bisogno di testare i limiti dell'array per i browser non IE.
Nota: l'agente utente può essere falsificato o omesso, a volte involontariamente se l'utente ha impostato il proprio browser su una "modalità di compatibilità". Anche se questo non sembra un grosso problema in pratica.
Ottieni la versione IE senza User-Agent
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 );
Come funziona: ogni versione di IE aggiunge il supporto per funzionalità aggiuntive non presenti nelle versioni precedenti. Quindi possiamo testare le funzionalità in modo top-down. Un ternario sequenza è utilizzato qui per brevità, anche se if-then
e switch
dichiarazioni avrebbe funzionato altrettanto bene. La variabile ie
è impostata su un numero intero compreso tra 5 e 11 o 1 per le versioni precedenti o 99 per le versioni più recenti / non IE. È possibile impostarlo su 0 se si desidera verificare esattamente IE 1-11.
Nota: il rilevamento degli oggetti potrebbe interrompersi se il codice viene eseguito su una pagina con script di terze parti che aggiungono polyfill per cose come document.addEventListener
. In tali situazioni, l'agente utente è l'opzione migliore.
Rileva se il browser è moderno
Se ti interessa solo sapere se un browser supporta o meno la maggior parte degli standard HTML 5 e CSS 3, puoi ragionevolmente supporre che IE 8 e versioni inferiori rimangano le principali app problematiche. Il test per window.getComputedStyle
ti darà anche un discreto mix di browser moderni (IE 9, FF 4, Chrome 11, Safari 5, Opera 11.5). IE 9 migliora notevolmente il supporto degli standard, ma l'animazione CSS nativa richiede IE 10.
var isModernBrowser = ( !document.all || ( document.all && document.addEventListener ) );