Criando sites que funcionam

Desenvolver páginas Web é muito mais do que simplesmente criar conteúdo HTML, CSS e JavaScript e então publicar num Web Host. Para começar, não é possível saber com qual navegador web o usuário acessará a sua página. Quem dirá se os recursos que foram usados na página estarão e continuarão funcionando corretamente em todos os navegadores web.

De fato, quando criamos um conteúdo para Web temos que pensar que os usuários podem estar usando diferentes tipos de browsers, inclusive em versões antigas. Além disso, pode ser que seja lançada uma nova versão daquele seu browser predileto e determinado recurso simplesmente pode começar a funcionar de forma diferente, afetando seu site.

Nesse artigo iremos citar algumas dicas para criar sites que simplesmente funcionam, exigindo pouca manutenção.

Evitar detecção de browsers

Até pouco tempo atrás, os desenvolvedores costumavam tentar detectar o browser do usuário para disponibilizar um recurso ou não. É o que chamamos de user agent detection. Aliás, se você procurar sobre esse assunto verá que existem muitos lugares que mostram como fazer isso. E essa prática era feita principalmente para lidar com peculiaridades de algumas versões do Internet Explorer que dispunham ou não de alguns recursos. Exemplo:

if (isIE) {
  style.filter = "alpha(opacity=75)";
}
else {
  style.opacity = "0.75";
}

O problema disso é que normalmente esse tipo de código simplesmente verifica se o browser é Internet Explorer e, se for, usa código obsoleto. Mas e se uma nova versão do IE for lançada abandonando o código obsoleto e adotando os padrões?

Para você ter uma ideia, muitas dos códigos que verificam se o browser é o IE procuram o texto “MSIE” no user agent:

var isIE = (navigator.userAgent.indexOf("MSIE") != -1);

E ainda existem várias outras formas de detectar o IE:

var isIE = !!document.all;
var isIE = !!window.attachEvent;
var isIE = !!window.ActiveXObject;
var isIE = !!document.createStyleSheet;
var isIE = /*@cc_on!@*/false;

Portanto, muitos sites simplesmente condenaram usuários do Internet Explorer a usar recursos obsoletos mesmo quando o browser já estivesse apto a executar código moderno.

O Internet Explorer 11 mudou a string de seu user agent para: Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; AS; rv:11.0) like Gecko. Além disso, várias APIs foram removidas ou ocultadas e recursos como @cc_on e VBScript foram desabilitados.

E como num passe de mágica, vários sites começaram a ser exibidos corretamente no IE 11 (ver detalhes aqui). Isso porque o código de detecção do user agent passou a não detectar mais o Internet Explorer como sendo Internet Explorer.

Agora, se a detecção de browser ainda é necessária, recomenda-se usar uma abordagem mais segura que é testar o user agent contra uma versão específica ou anterior do browser onde você tem certeza que determinado recurso não existe ou deve-se usar código obsoleto.

Contudo, a melhor abordagem é o uso de detecção de features, que é abordado logo em seguida.

Use detecção de features

Melhor que verificar se o usuário está usando determinado browser, é verificar se o browser do usuário suporta determinada feature. Como exemplo citamos o uso da função addEventListener ou attachEvent, sendo que a segunda funciona no IE 9 ou anterior. Nesse caso temos:

if(document.addEventListener) {
  // usar addEventListener
}
else {
  // usar atachEvent
}

E se você precisar de outro recurso que não está presente em alguns browsers, faça uma outra verificação. Exemplo:

if('opacity' in document.body.style) {
  // usar style.opacity
}
else {
  // usar style.filter
}

Dessa forma, caso o browser não suporte a função addEventListener mas suporte style.opacity, seu código tratará os casos da forma ideal.

Uma outra alternativa ainda é usar bibliotecas JavaScript que fazem as detecções das principais features, como por exemplo a biblioteca Modernizr. Com ela, podemos detectar funcionalidades de JavaScript, CSS e HTML. Exemplo (fonte):

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Usando Modernizr</title>
  <script src="modernizr.min.js"></script>

  <script>
  if (Modernizr.webgl){
    loadAllWebGLScripts(); // webgl assets can easily be > 300k
  } else {
    var msg = 'With a different browser you’ll get to see the WebGL experience here: \
            get.webgl.org.';
    document.getElementById( '#notice' ).innerHTML = msg;
  }
  </script>
</head>
<body><!-- ... --></body>
</html>

Evite usar recursos ainda não padronizados

Em um cenário ideal, deveríamos usar apenas recursos já padronizados e que, portanto, estão implementados nos browsers modernos.

Conforme já visto no artigo “Por dentro das novas funcionalidades dos browsers”, existem vários sites que fornecem o status de implementação de recursos. Lá podemos buscar informações sobre os recursos que desejamos usar.

Tem também o site “Can I use” que fornece informações de suporte a recursos e funcionalidades nos diferentes navegadores Web.

Agora, se for usar um recurso que existe em apenas alguns browsers, evitar abandonar de vez os demais browsers. No caso do CSS, por exemplo, usar prefixos CSS, mas procurar especificá-los para todos os prefixos possíveis conforme detalhado a seguir.

Use prefixos CSS corretamente

Recentemente publicamos um artigo sobre uso de prefixos CSS. O uso dos prefixos é feito para adotar recursos que ainda estão em desenvolvimento pelos browsers. O fato do recurso funcionar hoje somente no Google Chrome não quer dizer que ele não funcionará em outros browsers. Então, quando necessário, use todos os prefixos. Exemplo:

a {
  -moz-transition: color ease 0.3s; 
  -o-transition: color ease 0.3s;
  -webkit-transition: color ease 0.3s;
  transition: color ease 0.3s;
}

Para auxiliar nesta tarefa, existem alguns projetos que analisam seu site e incluem os prefixos quando necessário. Seguem alguns:

Outras dicas

  • Mesmo que você esteja desenvolvendo seu site para um browser específico, testar em diferentes browsers reduz o risco de problemas na exibição do site em diferentes navegadores.
  • Fazer análise do site usando ferramentas que identificam erros e pontos que podem ser melhorados. A Microsoft disponibiliza a ferramenta Site scan que permite analisar o seu site. Se o seu site é local e ainda não foi publicado, você poderá baixar o Site scan na sua máquina e executá-lo em um Node.js.
  • Analisar e identificar possíveis problemas no IE através da ferramenta Compat Inspector

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