Aprenda como detectar recursos do browser

Quando desenvolvemos para a Web, a primeira coisa que precisamos ter em mente é que não podemos forçar o usuário a utilizar um determinado browser. E quando o fazemos, existe uma grande chance do usuário desistir do nosso site ao invés do seu navegador Web.

Portanto, o desenvolvedor deve lidar com as peculiaridades dos navegadores Web e contornar as limitações da melhor maneira possível.

Atualmente existem muitas páginas que já fazem isso, mas elas usam detecção de browser e até de versões de browser. Porém isso não é recomendado. A isso dá-se o nome de user agent detection e deve ser evitado em prol das boas práticas de desenvolvimento na Web Moderna que sugerem utilizar detecção de features.

A seguir temos um exemplo de uma má prática de programação que é a de detecção de browser:

<script>
    var comingSoonMessage = document.getElementById("hidden-message");

    function isValidBrowser() {
        var myNav = navigator.userAgent.toLowerCase();
        var version;

        if (myNav.indexOf('msie') != -1) {
            version = parseInt(myNav.split('msie')[1])
            return version > 8;
        }

        return true;
    }

    if (isValidBrowser()) {
        comingSoonMessage.className = "fadeIn";
    } else {
        comingSoonMessage.className = "";
    }
</script>

Observem que no código acima estamos verificando se o browser é o Internet Explorer para determinar se podemos ou não usar o recurso “fadeIn”. Porém, mesmo que esse recurso exista nas versões mais recentes desse browser, do jeito que foi implementado, os usuários nunca conseguirão ter acesso a esse recurso no IE.

Outro recurso também que pode não existir em browsers antigos é a propriedade CSS opacity, o efeito de sombreamento de texto (text-shadow), entre outros.

Como fazemos para verificar quais browsers usam determinado recurso?

Para verificarmos quais recursos estão disponíveis em um determinado browser, podemos consultar o site CanIUse e então verificar nele se os recursos que desejamos utilizar já estão disponíveis nos diferentes browsers:

howtousefeaturedetection_caniuse

Como saber se determinado recurso está disponível no browser do usuário?

Para verificarmos se um determinado recurso é suportado pelo browser ou não, devemos fazer detecção de features (feature detection).

Para tanto existem bibliotecas que podem nos auxiliar, como é o caso do Modernizr. E através desse site conseguimos já visualizar quais recursos precisam de nossa atenção quando desenvolvemos um site para Web.

Passos para usar o Modernizr

  1. Definir os recursos que deseja utilizar.
  2. Acessar o site de download do Modernizr.
  3. Selecionar os recursos que iremos utilizar. Para esse exemplo, vamos selecionar o recurso CSS3 Animation (que engloba o “fadeIn”) e também o opacity:
    howtousefeaturedetection_modernizrconfig

    Selecionar apenas os recursos que queremos detectar ajuda a tornar a execução do script do Modernizr mais eficiente, não prejudicando a visualização do site pelo usuário.

  4. Depois de criada a build, fazer download do arquivo e colocar dentro do seu site.
  5. Adicionar o script nas páginas em que você precisar fazer detecção de features.
    <script src="Scripts/modernizr.custom.62681.js" type="text/javascript"></script>
    

    Feito isso, ao abrirmos a página no navegador Web, o Modernizr irá verificar o suporte para as features que selecionamos a pouco. No nosso caso, as features serão CSS Animations e opacity.

  6. Depois disso, podemos agora incluir o script que faz detecção de feature usando informações disponibilizadas pelo script do Modernizr, substituindo o script que fazia detecção de userAgent:
    <script>	
    	var comingSoonMessage = document.getElementById("hidden-message");
    	if (!Modernizr.opacity) {                  
    	     comingSoonMessage.style.filter = "alpha(opacity=0)";
    	}
                 
            if (Modernizr.cssanimations) {
    	     comingSoonMessage.className = "fadeIn";
    	} else {
    	     comingSoonMessage.className = "";
    	}
    </script>
    

    Debug do Javascript com detecção de feature
    Debug do Javascript com detecção de feature

Quer obter mais dicas e sugestões? Comente aqui ou faça uma pergunta no Stack Overflow em Português com a tag “microsoft-edge”. E continue nos acompanhando no talkitbr.

Leituras Recomendadas

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s