Classes condicionais - Seu layout perfeito em todos os browsers com apenas um CSS e sem hacks
Classes condicionais - Seu layout perfeito em todos os browsers com apenas um CSS e sem hacks
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.