Os 5 problemas de Interoperabilidade Web – Parte 2

Recentemente publicamos um post onde descrevemos problemas que podem prejudicar a visualização de uma página Web nos navegadores Web modernos. E conforme abordado no nosso primeiro post “Os 5 problemas de Interoperabilidade Web – Parte 1”, são vários os problemas que podem prejudicar a visualização de uma página Web e podemos verificar quais desses problemas afetam nossos sites usando a ferramenta Site scan da Microsoft.

Desses problemas, tem 5 que podem afetar a interoperabilidade Web, isto é, que podem impactar usuários que acessam seu site por algum browser específico. São eles:

  1. Modo de renderização
  2. Detecção de navegador Web
  3. Prefixos CSS
  4. Bibliotecas Javascript desatualizadas
  5. Plugins legados

No primeiro post falamos sobre o problema com o Modo de renderização e agora vamos abordar o segundo problema que está relacionado com a detecção de navegador Web.

Detecção de navegador Web

O que é?

A detecção de navegador Web é uma técnica que permite identificar o navegador que está sendo utilizado pelo usuário para então decidir qual conteúdo ou recurso será entregue ou executado. Para tanto usa-se a informação presente no navigator.userAgent ou ainda $.browser.

Como devo fazer no meu site?

Recomenda-se usar detecção de funcionalidades ao invés de detecção de navegadores Web. Dessa forma, se o browser for atualizado e nesta atualização passar a suportar a funcionalidade ou recurso, o usuário será beneficiado e não será necessária manutenção posterior do site.

Para a detecção de funcionalidades podemos usar bibliotecas como o Modernizr que verificam se aquela funcionalidade existe e expõem, via classes CSS, indicadores que permitem ser facilmente usados pelos desenvolvedores, seja via CSS, seja via Javascript. Veja como usar detecção de funcionaldiades aqui.

Nota: Existem algumas situações que usamos detecção de browser simplesmente para definir se o mesmo é de uma versão mobile, tablet ou desktop. Para este caso podemos usar outros recursos como o Javascript screen.width ou ainda CSS Media Queries.

E mesmo que pareça não ser possível descartar uso da detecção de browser (principalmente quando é feito por um recurso Javascript de terceiros), vale a pena verificar porque essa detecção está sendo feita para tomar a decisão se realmente ela é necessária.

Se eu não corrigir, como isso pode prejudicar meu usuário?

Quando seu site usa detecção de navegadores Web para decidir se determinado código será usado ou não, na prática você está condenando os usuários daquele browser a não ter aquela funcionalidade. Inclusive no caso do browser passar a suporte aquela funcionalidade.

Os browsers modernos, como o Chrome, Firefox e Edge, estão em constante atualização. E usar detecção de browsers vai contra esse movimento da Web que busca garantir que os sites simplesmente funcionam independentemente do browser que o usuário esteja utilizando.

E quanto ao Internet Explorer? Bem, muitas das restrições apresentadas nas versões anteriores do IE podem ser verificadas via detecção de funcionalidades.

Quais são os impactos caso eu corrija o problema?

Quando foi adicionada detecção de navegadores Web, normalmente isso foi feito com base na constatação de um problema durante fase de desenvolvimento/testes do site. Portanto, tomou-se essa decisão com base numa limitação ou necessidade de disponibilizar conteúdo específico para determinado browser.

Ao remover detecção de navegador Web e usar outras técnicas, é necessário refazer os testes para garantir o seu site ainda continua funcionando adequadamente nos vários navegadores Web que podem estar sendo utilizados pelos seus usuários. E normalmente o problema está mais relacionado com as versões anteriores do Internet Explorer. Para ajudar nessa tarefa, a Microsoft disponibiliza máquinas virtuais gratuitas para testar seu site nessas versões do IE. Para saber mais, acesse nossos posts que abordam testes em sites:

O que mais está envolvido?

Existem ainda muitas páginas feitas para funcionar no Internet Explorer e que usam comentários condicionais HTML para disponibilizar conteúdo específico para determinadas versões do navegador. Porém esse recurso foi descontinuado e é tratado como simples comentário a partir do Internet Explorer 10. Portanto só funcionará para versões do Internet Explorer 9 ou anteriores. Exemplo de código com comentário condicional:

<!--[if lt IE 7 ]>        
  <!-- código para IE6- --> 
<![endif]-->

<!--[if IE 7 ]>           
  <!-- código para IE7  -->  
<![endif]-->

<!--[if IE 8 ]>
  <!-- código para IE8  -->
<![endif]-->

<!--[if IE 9 ]>
  <!-- código para IE9  -->
<![endif]-->

<!--[if (gt IE 9)|!(IE)]>
  <!-- código para IE9+ -->
<![endif]-->

Que saber mais?

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.

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