segunda-feira, 17 de dezembro de 2007

CSS - IE6 versus Selector de Atributos

O IE6 não suporta CSS "attribute Selectors", como no exemplo seguinte:
div.Field input[type="text"]
{
color: blue;
}

Assim, temos que circundar o problema, e a solução mais comum, é adicionar uma class específica para o caso que queremos resolver, e atribuir a class ao elemento respectivo, por exemplo:
div.Field input.Text /* IE6 Does NOT support attribute selector */
{
color: blue;
}

Passamos então a representar o conteudo da seguinte forma:
<div class="Field">
<label for="Name">Nome</label>:<input class="Text" type="text" id="Name" value="">
</div>

Mas numa perspectiva futura, podemos querer suportar ambas as regras, com algo como o seguinte:
div.Field input[type="text"],
div.Field input.Text /* IE6 Does NOT support attribute selector */
{
color: blue;
}

Perfeitamente válido ! Certo ?
Sim, é perfeitamente válido segundo o standard; Mas não, não funciona no IE6!
E de nada vale trocar a ordem das regras, dado que o comportamento é exactamente o mesmo.

O problema é devido ao IE6 rejeitar as regras que não suporta, conjuntamente com qualquer outra que lhe esteja associada.

Para resolver o problema temos que duplicar as formatações, de forma a que a rejeição da regra não suportada, não afecte as restantes, ou seja:
div.Field input[type="text"]
{
color: blue;
}

div.Field input.Text /* IE6 Does NOT support attribute selector */
{
color: blue;
}

Saber isto pode poupar-vos muito tempo :)

Sem comentários: