Compatibilidade entre Browsers

 

COMO MANTER COMPATIBILIDADE ENTRE BROWSERS?

Além da compatibilidade entre todos os dispositivos (responsive design), devemos assegurar que quando desenhamos um website este será visualizado corretamente em todos os navegadores (browsers). Desta forma, existem procedimentos que podemos realizar para garantir o correto funcionamento cross-browsers.

1 – ASPECTOS A CONSIDERAR:

Quando desenvolvemos o código, temos que ter em consideração o utilizador final, de que forma o utiliza e onde irá visualizar o nosso website. Poderá ser um utilizador que não utilize rato, pode utilizar dispositivos antigos e consequentemente browsers desatualizados ou ainda pessoas com deficiência.

2 – DEFINIR UM DOCTYPE VÁLIDO:

É o início do ficheiro HTML onde se dá instruções ao browser sobre a versão da linguagem que será utilizada. Anteriormente ao HTML5 era utilizado uma definição extensa normalmente com duas linhas, hoje apenas necessitamos de:

3 – FRAMEWORKS:

As frameworks como Bootstrap, Foundation ou Skeleton oferecem uma percentagem bastante elevada de compatibilidade entre os browsers. No entanto, devemos sempre ler a sua documentação e os detalhes da compatibilidade da sua utilização com os browsers existentes.

4 – SIMPLIFICAR O CÓDIGO:

Ao utilizarmos HTML/CSS/JS devemos ao máximo simplificar o nosso código e verificar sempre a possibilidade de utilizar o mínimo número de linhas possível. Quando não for possível simplificar e temos um código extenso, podemos dividir e criar blocos para diminuir a sua extensão. Nas CSS podemos utilizar pré-processadores. Desta forma, torna-se mais fácil realizar a verificação de erros e correção (track and debug).

5 – RESETAR AS CSS:

Utilizamos esta limpeza das folhas de estilo CSS no início de forma a limpar aspectos no desenho que sejam específicos daqueles browsers. Os títulos, botões, margens ou outras características do desenho podem ser visualizadas de forma diferente em diferentes browsers. Com o reset, conseguimos uniformizar/limpar as características de desenho definido no início das CSS os estilos que pretendemos.

6 – CÓDIGO CONDICIONAL:

Podemos selecionar especificamente como pretendemos que apareçam os estilos em cada um dos browsers. Para isso, utilizamos o código HTML condicional utilizando IF:

    <!--[if IE]>

       Utiliza IE

    <![endif]-->

    <![if !IE]>

       Utiliza outro browser

    <![endif]>

7 – VALIDADORES DE HTML E CSS:

Existem programas externos ou plugins/addons de editores de código que permitem verificar os erros do nosso código e se está dentro das normas da W3C (Organização que padroniza a Web). Também fornecem um serviço de padronização online através de hiperligação:
https://validator.w3.org/

8 – VERIFICANDO E TESTANDO AS DIFERENÇAS:

Devemos testar em diferentes dispositivos e browsers de forma a encontrar diferenças de visualização ou funcionamento.

De forma a facilitar estas tarefas, existem ferramentas online que nos ajudam a testar em vários browsers e dispositivos em simultâneo. Uma que costumo utilizar é:
https://crossbrowsertesting.com/

CONCLUSÃO:

Para desenvolver um website sem incompatibilidades, devemos ter em consideração onde este será visualizado e utilizado. De forma a minimizar estes problemas, inicialmente devemos resetar as CSS, utilizar pré-processadores, utilizar o mínimo de código possível, utilizar uma framework, eliminar os erros utilizando a Console do browser e no final validar e verificar todas as diferenças. Para corrigir estas diferenças, podemos utilizar condições de diferenciação entre browsers.