Estou reconstruindo um site usando CSSflexbox.

Na verificaçãocompatibilidade do navegador, Vejo que o flexbox é suportado por todos os navegadores modernos, exceto que o Safari 8 e o IE 10 exigem prefixos de fornecedores.

Ao verificar o Google Analytics, vejo que 96% dos visitantes do site nos últimos 6 meses usam navegadores compatíveis com o flexbox. Os 4% restantes usam navegadores que requerem prefixos ou não oferecem suporte.

Como estamos falando de 4% dos usuários, e o número continuará diminuindo (e eu gosto de manter meu código o mais limpo e simples possível), estou pensando em não usar prefixos e, em vez disso, pedir aos usuários que atualizem suas navegadores.

Como posso segmentar navegadores mais antigos para exibir uma mensagem aos usuários solicitando a atualização do navegador?

Aqui está o que eu tenho até agora:

<!--[if IE]>
    <div class="browserupgrade">
        <p>You are using an outdated browser. Please <a href="http://browsehappy.com/">
           upgrade your browser</a> to improve your experience.</p>
    </div>
<![endif]-->

Este comentário condicional do IE aborda as versões 6, 7, 8 e 9 do IE.

Esses visitantes receberão um alerta com um link para baixar um navegador atual. Contudo,A Microsoft descontinuou o suporte para comentários condicionais, começando com o IE10.

Agora preciso de algo semelhante para:

IE 10Safari 7-8Opera Mini <8Navegador UC para AndroidNavegador Android <4.4

Existe um script JS / jQuery simples para lidar com este trabalho? Ou outro método leve?

Solução

Obrigado por todas as respostas. Claramente, existem muitas maneiras de resolver esse problema (funções Modernizr, PHP, jQuery, Javascript simples, CSS, browser-update.org, etc.) Muitos desses métodos farão o trabalho de maneira completa e eficaz.

Eu fui com o mais simples: CSS (crédito@LGSon)

Este CSS abrange essencialmente todos os navegadores direcionados, exceto o IE <= 7.

.browserupgrade { display: block; }
_:-ms-fullscreen, :root .browserupgrade { display: none; }
:-o-prefocus, .browserupgrade { display: none; }
@supports (display: flex) { .browserupgrade { display: none; }}

Veja a resposta para detalhes.

E para os relativamente poucos visitantes que usam o IE <= 7, um comentário condicional no HTML:

<!--[if lte IE 7]>
    <div style=" ... inline styles here ...">
        browser upgrade message here
    </div>
<![endif]-->