Desenvolvendo seu site para diferentes browsers
Autor: Ana Tafarello | Publicado: 2008-08-22T10:18:00-03:00

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:&lt;!--[if IE]&gt;&lt;!--[endif]--&gt;-Se for superior ao IE5 faça:&lt;!--[if gt IE5]&gt;&lt;!--[endif]--&gt;-Se for IE5 ou superior faça:&lt;!--[if gte IE5]&gt;&lt;!--[endif]--&gt;-Se for anterior ao IE 5.5 faça:&lt!--[if lt IE5.5]&gt;&lt;!--[endif]--&gt;-Se for IE6 ou anterior faça:&lt;!--[if lte IE6]&gt;&lt;!--[endif]--&gt;Vamos importar um arquivo CSS para a versão 6 ou anterior:&lt;head&gt;<!--[if lte IE6]>&lt;link rel="stylesheet" type="text/stylesheet" href="css.css"&gt;&lt;!--[endif]--&gt; &lt;link rel="stylesheet" type="text/stylesheet" href="css_7.css"&gt; No código acima, o site estará utilizando um arquivo CSS para as versões 6 e anteriores e um outro para o IE7 e para outros navegadores também.Agora vamos ver como funciona para apenas uma parte do código. Vale lembrar que esse código deve ser escrito no seu arquivo html:&lt;head&gt;&lt;!--[if gte IE5]--&gt;&lt;style&gt;.teste{text-align:center;margin:0 0 0 23px;}&lt;!--[endif]--&gt;E é isso aí pessoal!!! Qualquer dúvida ou sugestão, estamos aí!! =)Um grande abraço!!!