sexta-feira, 22 de agosto de 2008

Desenvolvendo seu site para diferentes browsers

Diferentes browsers renderizam os códigos de uma maneira ligeiramente diferente. Fato! Algo que traz uma grande dor de cabeça para um desenvolvedor web. Uma div fica totalmente à esquerda no Firefox, mas no Internet Explorer ela fica alguns pixels mais à direita. Uma célula de uma tabela dá um espaçamento entre sua borda e seu conteúdo no Internet Explorer, no Firefox, o conteúdo fica grudado. Esses são apenas alguns exemplos do problema, mas não se preocupe, existe uma maneira fácil de resolver.

No código CSS, você pode utilizar um caracter de escape que diferencia os códigos para os diferentes browsers. Quando você quiser diferenciar uma propriedade de algum elemento para o Internet Explorer, basta colocar na frente dela o caracter underline ( _ ), a propriedade que não tiver nenhum caracter de escape funcionará para o Firefox. Veja um exemplo:


div{

margin:10 px 0 0 8px;
_margin: 0 0 0 20px;

}

No Firefox, a margem de cima da div terá 10 pixels e a margem da esquerda, 8 pixels. Já no Internet Explorer, essa mesma div terá apenas 20 pixels para a margem da esquerda.

As diferentes versões de algum browser também trazem esse tipo de problema. Com a chegada do Internet Explorer 7, vários sites tiveram que ser refeitos pois muitas das "gambias" feitas nos códigos CSS para contornar eventuais problemas das versões anteriores já não funcionavam mais na nova versão do navegador e as diferenças com outros navegadores continuaram a existir. Felizmente, existe um caracter de escape para o IE7 também, que é o asterisco ( * ) (não é asterísTIcooo!!!).

div{

margin:10 px 0 0 8px;
_margin: 0 0 0 20px;
*margin:10px 0 0 0;

}

Agora, no Internet Explorer 7 a margem de cima da div terá 10 pixels.

Como dito anteriormente, vários desenvolvedores tiveram que reescrever seus códigos CSS para que seu site pudesse ser visualizado corretamente no IE7. Mas e aí? Nos outros browsers eles deixariam de funcionar? Não necessariamente. Para que isto não fosse um problema, foram desenvolvidos os Comentários Condicionais. Utilizando esta técnica, você pode tanto importar um arquivo CSS inteiro, como editar apenas uma parte do código. Veja:


-Se for IE faça:

<!--[if IE]>

<!--[endif]-->


-Se for superior ao IE5 faça:

<!--[if gt IE5]>

<!--[endif]-->


-Se for IE5 ou superior faça:

<!--[if gte IE5]>

<!--[endif]-->


-Se for anterior ao IE 5.5 faça:

<!--[if lt IE5.5]>

<!--[endif]-->


-Se for IE6 ou anterior faça:

<!--[if lte IE6]>

<!--[endif]-->



Vamos importar um arquivo CSS para a versão 6 ou anterior:

<head>

Visitantes do blog