Desenvolvimento

21 jul, 2009

Compatibilidade de código com IE8

Publicidade

Nesse artigo vou falar um pouco sobre como o Microsoft Internet
Explorer mudou a forma como os browsers mais antigos da Microsoft tratavam HTML, CSS e Javascript e como é mantida a compatibilidade para sites que ainda
não estão preparados para serem vistos com a nova versão.

O novo Browser da Microsoft, o Internet Explorer 8,  foi lançado como proposta da Microsoft em
criar um navegador compatível com os padrões web estabelecidos pelo W3C, bem
como também não continuar perdendo mercado para os outros navegadores que, como
sabemos, estão ficando cada vez mais cheios de recursos tanto para
desenvolvedores como para usuários finais. Portanto esse lançamento não foi
apenas para ajudar os desenvolvedores, mas como interesse próprio.

Para ter essa compatibilidade com o HTML 4.01 e CSS 2.1
ocorreram muitas mudanças, e com isso muitos sites iriam ficar desconfigurados
em sites com código em navegadores mais antigos (e certos em IE8) ou
vice-versa. Uma maneira que a equipe da MS encontrou para contornar isso foi
criar uma forma de se renderizar o site com engines de versões antigas dentro
do próprio IE8.

Existem três formas de modificar a engine a ser utilizada para
renderizar o site, uma acionada pelo usuário e duas acionadas pelo
desenvolvedor do site. Uma das formas que o desenvolvedor pode usar para forçar
o IE8 renderizar o site com uma versão mais antiga é modificando o cabeçalho
HTTP da resposta informando a versão. A outra forma, que é a mais convencional,
já que não necessita de nada do server-side e também porque muitas vezes é
apenas uma página específica que não está se comportanto corretamente, assim
poderíamos deixar todos os outros templates naturais e apenas tratar esse caso
diferente, para isso basta colocar diretamente no template essa informação.

Vamos ver agora como podemos fazer isso.

Antes de tudo, precisamos nos lembrar de uma coisa que pode passar
despercebida. É fundamental o uso de doctype no documento indicando de tipo de
html está sendo usado no template, de outra forma nada disso irá ter efeito.
Caso uma página não tenha doctype informado no topo, o IE8 irá acionar a engine
mais antiga (IE5 / IE6).

OK, o doctype precisa ser informado, mas tem outro detalhe, se o
doctype informado for de versão antiga de html (por exemplo informar que o documento
usa Html 3), o IE8 vai continuar renderizando com a versão IE5/6, mas caso
esteja com um doctype já recente (por exemplo informando alguma versão de
XHTML), aí o IE8 renderizará como IE8. 

Toda essa parte acima é apenas para definição do doctype e da engine
padrão utilizada, mas ainda não usamos a tag para forçar outro modo, para isso
basta usar a seguinte tag meta dentro do cabeçalho do documento (por exemplo
pra forçar o modo IE7):

<meta http-equiv=”X-UA-Compatible” content=”IE=7″ />

os valores para o atributo content podem ser um dos seguintes:

IE=5 ? renderiza em
modo IE5 / IE6

IE=7 ? renderiza em
modo IE7

IE=8 ? renderiza em
modo IE8

IE=edge ? renderiza com a ultima versão disponível do Internet
Explorer (por exemplo quando sair a versão 9 não precisaríamos trocar onde já
estava para o 8).

Para saber em qual engine a página está sendo renderizada, existe
uma propriedade no window.document chamada documentMode, então com um alert(
document.documentMode ) conseguimos poupar um bom tempo de debug.

O IE8 vem com uma ferramenta um pouco parecida com o Firebug do
Firefox, chamada IE Developer Tools, antes disso para resolvermos problemas de
CSS ou Javascript precisávamos instalar ferramentas paralelas ou alguns plugins
mais simples.

Com relação à codificação, algumas coisas que funcionavam de uma
forma no IE7 ou 6 mudaram, já que o IE8está bem mais padronizado em relação ao
W3C. Algumas dessas mudanças podem parar funcionalidades de muitos sites, uma
delas é o comportamento do elemento <button>, por exemplo se tínhamos uma
tag dessa forma: <button id=”myButton”>Clique</button> e esse botão
só tinha alguma ação específica de javascript mas estava dentro de um
formulário, até a versão anterior à 8 esse elemento tinha comportamento de
type=”button”, mas agora ele tem comportamento de type=”submit” o que pode
enviar algum formulário para o servidor antes da hora, agora, para isso não
acontecer, precisa-se forçar o type para button.

Outra coisa que está se comportando diferente das versões anteriores
do IE (não que esteja errada) é o document.getElementById(“myId”). Até a versão
anterior esse método retornava o objeto referente ao item com um id=”myId” ou
algum objeto com um name=”myId”. Agora o método retorna o que era esperado,
apenas elementos que tem o id=”myId”, e também isso é case-sensitive, ou seja
myId é diferente de myid ou MyId.

Com CSS, as mudanças são para deixar o suporte a CSS expression,
conhecida como CSS dinâmico, por exemplo colocar uma regra com base em um
retorno de função de javascript. O suporte foi deixado por motivo de
performance, já que essas regras custavam muito para o browser.

Todas essas mudanças com a vinda do IE8 foram para melhor. Um código
que estiver feito com webstandarsd vai ser mais fácil para dar suporte para
esse browser.

No site http://msdn.microsoft.com
pode-se encontrar mais informações e detalhes sobre esse assunto.