CSS seletivo pelo tipo de browser

[ad#texto]

Quem trabalha desenvolvendo intefaces para a Web sabe a complicação que é acertar um script JavaScript ou CSS para funcionar bem nos diversos navegadores, para ser mais específico, as diferenças entre Firefox e Chrome são mínimas, mas a situação é bem diferente no caso do Internet Explorer, que não segue os padrões Web.

Mesmo a Microsoft tendo trabalhado para reverter esta situação e de fato a última versão do Internet Explorer estar bem melhor, reverter este legado é algo que vai demorar um pouco mais para acontecer, mas o que fazer quando um CSS não funciona como deveria para o Internet Explorer?

Fazer dois arquivos CSS e integra-los ao HTML conforme o browser é algo funcional, porém é de difícil manutenção, mas não entre em pânico (pelo menos por agora), temos uma solução que vai permitir que você utilize somente um arquivo CSS e que dentro deste arquivo seja especificado quando utilizar o seletor e para que browser.

Veja um exemplo abaixo:

#idObjeto {width: 100%} * html #idObjeto {width: 80%} /* IE */

Nem é preciso explicar muito, mas vejamos, temos um caso fictício de que em todos os browsers o width de uma DIV fica ótimo em 100%, menos para o Internet Explorer que fica melhor em 80%, então o script acima vai fazer duas chamadas para o mesmo seletor e o *HTML irá exemplificar que para os browsers padronizados será um caminho, neste caso o 100% e para o Internet Explorer será 80%.

Simples, funcional e de fácil manutenção, pois fica tudo bem acessível dentro de um único arquivo em um único local.