Obtenha a versão do IE do agente do usuário
var ie = 0;
try { ie = navigator.userAgent.match( /(MSIE |Trident.*rv[ :])([0-9]+)/ )[ 2 ]; }
catch(e){}
Como funciona: a sequência de agente do usuário para todas as versões do IE inclui uma parte " versão do espaço MSIE " ou " versão com espaço ou dois pontos do cólon do outro texto rv do Trident ". Sabendo disso, pegamos o número da versão em uma String.match()
expressão regular. Um try-catch
bloco é usado para reduzir o código; caso contrário, precisaríamos testar os limites do array para navegadores que não sejam o IE.
Nota: O agente do usuário pode ser falsificado ou omitido, às vezes sem intenção, se o usuário configurou o navegador para um "modo de compatibilidade". Embora isso não pareça muito problema na prática.
Obtenha a versão do IE sem o agente do usuário
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 );
Como funciona: cada versão do IE adiciona suporte para recursos adicionais não encontrados nas versões anteriores. Assim, podemos testar os recursos de maneira descendente. A ternário seqüência é usado aqui por brevidade, embora if-then
e switch
declarações iria funcionar tão bem. A variável ie
é definida como um número inteiro de 5 a 11, ou 1 para mais antigo ou 99 para mais novo / não IE. Você pode configurá-lo como 0 se quiser apenas testar o IE 1-11 exatamente.
Nota: A detecção de objetos pode ser interrompida se o seu código for executado em uma página com scripts de terceiros que adicionam polyfills para coisas como document.addEventListener
. Em tais situações, o agente do usuário é a melhor opção.
Detectar se o navegador é moderno
Se você estiver interessado apenas em saber se um navegador suporta ou não a maioria dos padrões HTML 5 e CSS 3, você pode razoavelmente supor que o IE 8 e inferiores permanecem os principais aplicativos problemáticos. O teste window.getComputedStyle
também fornecerá uma combinação bastante boa de navegadores modernos (IE 9, FF 4, Chrome 11, Safari 5, Opera 11.5). O IE 9 aprimora muito o suporte a padrões, mas a animação CSS nativa requer o IE 10.
var isModernBrowser = ( !document.all || ( document.all && document.addEventListener ) );