Os 5 problemas de Interoperabilidade Web – Parte 1

Quando desenvolvemos uma página Web, temos que nos preocupar com vários aspectos:

  • Conteúdo apresentado
  • Apresentação visual
  • Recursos e funcionalidades

E então trabalhamos para colocar tudo no nosso site, podendo fazer isso a partir do zero ou utilizando algum dos vários frameworks ou templates de páginas Web que são disponibilizados gratuitamente.

Mas ás vezes acabamos deixando passar alguns problemas que podem prejudicar a visualização do site pelos nossos usuários. Isso principalmente porque o usuário pode estar utilizando um navegador Web que não suporta alguns recursos ou efeitos visuais que colocamos no site. E antes que pensemos em tentar forçar o usuário a utilizar um navegador Web específico, precisamos entender que o nosso site está na Web, podendo ser acessado de qualquer lugar por qualquer pessoa usando qualquer navegador.

Mas quais são esses problemas que estamos falando?

São vários, mas podemos destacar 5 deles que podem afetar seu usuário e que estão em destaque no Site scan da Microsoft:

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

Aliás, o próprio Site scan verifica se sua página Web possui esses problemas. Para conferir, basta fazer agora a análise do seu site(veja aqui como).

E nesse primeiro post iremos abordar o problema relacionado com o modo de renderização.

Modo de Renderização

O que é?

O modo de renderização diz respeito a forma como o navegador Web interpreta e desenha sua página para o usuário e está relacionado com o conteúdo HTML da sua página Web. Toda página Web é escrita usando a linguagem HTML e essa linguagem foi evoluindo com o passar dos anos e alguns recursos foram descontinuados e outros, mais mordernos, foram adicionados.

Como devo aplicar no meu site?

Recomenda-se usar o modo de renderização que segue os padrões mais recentes da Web, que no nosso caso é o HTML5. Para tanto, devemos especificar o tipo de documento incluindo a seguinte linha como a primeira da página:

<!DOCTYPE html>

Contudo, somente a declaração do tipo de documento HTML5 não é suficiente. Temos que garantir que toda marcação HTML que usamos faz parte do HTML5 e que não estamos usando recursos obsoletos. Neste link você pode validar sua página para verificar se ela está seguindo as recomendações do HTML5. Portanto, tornar uma página Web moderna que usa HTML5 pode impactar na forma como estruturamos nosso conteúdo.

Nota: Existem muitas páginas na Web desenvolvidas usando XHTML. Para essas páginas, costumamos encontrar a declaração do XML como primeira linha da página: <?xml version="1.0" encoding="UTF-8"?>.
Nesse caso, especifica-se a declaração do tipo de documento na segunda linha.
Contudo, o tipo de documento HTML5 define o documento como sendo XML, não sendo necessário especificar a declaração <?xml version="1.0" encoding="UTF-8"?>.

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

Na prática, muitos dos navegadores Web modernos (eg. Chrome, Firefox e Edge) conseguem interpretar o conteúdo da sua página sem problemas, mesmo quando você não diz qual versão da linguagem está utilizando. Mas não podemos sempre contar com isso. O certo é garantirmos que o tipo de documento esteja especificado corretamente.

Além disso, isso pode fazer com que o Internet Explorer use um modo de renderização de versões anteriores (10, 9, 8, 5 ou até 5) dependendo do que estiver definido como tipo de documento.

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

Fizemos vários testes e notamos que atualmente os principais navegadores Web são bem permissivos quanto a escrita do HTML fora dos padrões definidos pelo tipo de documento. Portanto, você pode especificar o tipo de documento HTML5 e então ir progressivamente atualizando também o conteúdo do site. Para tanto você pode usar o validador da W3C. E existem muitos recursos novos da linguagem que facilitam bastante o desenvolvimento da página.

Mas não custa nada testar suas funcionalidades nos diferentes navegadores Web quando especificar o tipo de documento para HTML5 (veja aqui como). E caso você encontre algum problema, é só comentar nesse post.

O que mais está envolvido?

Além da especificação do tipo de documento, existe também a marcação meta http-equiv="X-UA-Compatible" usado para definir qual modo de renderização o Internet Explorer deve aplicar para o site. A menos que tenhamos razões para escrever uma página para versões anteriores do Internet Explorer, a recomendação é especificarmos essa informação da seguinte maneira:

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

O valor Edge determina que o Internet Explorer use o modo padrão para exibir a página Web.

Devemos buscar sempre desenvolver páginas para a Web Moderna. O uso de versões anteriores é justificável somente quando ainda há dependência para bibliotecas ou recursos legados e que ainda não podem ser substituídos por outros aderentes a Web Moderna. E para esses casos, podemos adotar também outros recursos como o Enterprise Mode e a lista de compatibilidade do Internet Explorer.

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

Um comentário

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