Existem várias maneiras de se lidar com as diferenças entre browsers quando se trata de CSS. Eu mesmo já falei sobre CSS hacks, comentários condicionais e até uma biblioteca JS que corrige os problemas do IE tornando-o standards compliant. Cada uma delas tem suas vantagens e desvantagens, e ainda vou escrever um post sobre isso, prometo.
Os comentários condicionais costumam ser uma das maneiras mais aceitas e bem vistas de se encarar o problema. Com eles é possível entregar o layout perfeito, sem erros, mantendo o CSS limpo, sem hacks e válido à um custo razoável: o uso um arquivo CSS adicional para o Internet Explorer. Pra quem ainda não conhece, funciona assim:
<html> <head> <link rel="stylesheet" type="text/css" href="estilos.css" /> <!--[if IE 6]> <link rel="stylesheet" type="text/css" href="estilos-para-ie6.css" /> <![endif]--> </head> <body> <div id="menu">conteúdo do site....</div> </body> </html>
Tudo o que estiver dentro das tags <!–[if IE 6]> e <![endif]–> será interpretado apenas pelo Internet Explorer 6. Dessa forma você pode escrever o seu CSS sem nenhum hack, com código 100% válido, e colocar todas as correções em um outro arquivo específico para o IE. A desvantagem é ter 2 arquivos CSS ao invés de um, o que pode ser prejudicial em termos de atualização e manutenção.
Ok, nenhuma grande novidade até aqui.
Mas e se, ao invés de usar os comentários condicionais para linkar um novo CSS, os usássemos para fazer o seguinte:
<html> <head> <link rel="stylesheet" type="text/css" href="estilos.css" /> </head> <!--[if IE 6 ]> <body class="ie"> <![endif]--> <!--[if !IE 6]>--> <body> <!--<![endif]--> <div id="menu">conteúdo do site....</div> </body> </html>
Entendeu? Isso faz com que a classe “ie” [class="ie"] seja aplicada apenas quando o browser utilizado é o Internet Explorer 6 [if IE 6]. Caso contrário o <body> fica sem nenhuma classe [o sinal "!" significa "não igual"]. Assim, podemos escrever nosso CSS da seguinte maneira:
div#menu { color: inherit; } /* linha interpretada por todos os browsers */
.ie div#menu { color: #ff8000; } /* linha interpretada apenas pelo IE 6 */
Ou seja, podemos colocar todas as correções precedidas pelo seletor de classe “.ie”, dessa forma apenas o IE 6 irá interpretá-las. Eliminamos assim a necessidade de um segundo arquivo e ficamos livres também dos hacks, podendo então escrever CSS 100% válido.
3 Comentários
Legal demais, Valew cara to sempre aprendendo ai com vc!
Cara muito,muito,muito,muito,muito bom o seu trabalho…vc está de parabéns até me motivou a entrar na área de web, li também sobre os 47 mandamentos e achei muito bom, poder se espelhar em bons profissionais, e este site é isso qualidade,foco e principalmente humildade.
Parabéns por este maravilhoso trabalho !!!!!!!!
abraços
Att..
Anderlinux
essa onda agora de navegadores tem deixado nos programadores loucos.. nossa é tao complicado isso.. cada navegador interpreta o site de uma forma.. ate quando isso minha gente.. grande abraço a todos..