Falso hover no Internet Explorer
Por:
Sexta-feira 28 Abril 2006 às 13:19Categoria: HTML / CSS / JavaScript
Todos sabem que o Internet Explorer não fez uma implementação completa de CSS2. E dentre as várias limitações do browser azul uma delas é não compreender o pseudo elemento :hover. Com ele você pode fazer coisas interessantes que os desenvolvedores do passado utilizavam JavaScript inline para simular o mesmo efeito. Nunca gostei desses scripts inlines.
Eu encontrei o script Fake :hover, um arquivo .htc de extensão proprietária da Microsoft que pode ser chamado de dentro de uma regra de CSS dentro em um conditional comment. Veja mais detalhes deste script no XS4ALL. Através dele, o IE 5 e 6 reconhecem minhas regras de CSS que usam o pseudo elemento :hover em qualquer outro elemento como tables e inputs por exemplo. Simples e eficiente.
Para implementar o script, basta salvá-lo (é claro) e utilizar um conditional comment para chamá-lo da seguinte maneira:
<!--[if IE]>
<style type="text/css">
body { behavior:url(scripts/csshover.htc); }
</style>
<![endif]-->
Como o script é chamado de dentro de um conditional comment, mesmo que o código esteja presente em todas as páginas para todos os browsers, apenas o Internet Explorer vai parsear e tratar seu conteúdo, ficando invisível para os browsers mais inteligentes. Eu apliquei este exemplo no hotsite do e-MBA da Webroom em Uberlândia. Façam seus textes usando o Internet Explorer passando o cursor sobre as tr das tabelas e veja que realmente funciona.
Artigos relacionados:
- Conditional Comments no Internet Explorer
- Estilizando abbr no Internet Explorer 6
- Qual o seu fluxo de trabalho para testar seu CSS?
- O Internet Explorer é um lixo!
- O Internet Explorer 7 e como manter a versão 6 instalada no Windows XP
- Animated Scroll em JavaScript
- CSS Tooltip
Este texto não pode ser copiado ou reproduzido em nenhum outro site na íntegra sem autorização do autor!. Mais detalhes sobre licença de uso aqui!
O Revolução Etc é o site pessoal do Henrique C. Pereira que trabalha com design de interfaces, planejamento, arquitetura da informação e desenvolvimento para web. Ele escreve aqui sobre várias coisas relacionadas com acessibilidade, web standards, tecnologia, desenvolvimento e o que mais der na telha, além de eventualmente escrever alguma coisa ou outra para o Webinsider. Leia mais.
# 1° gabriel caires Sexta-feira 28 Abril 2006 às 14:00GMT
Muito legal isso de não precisar de javascrip inline,eu testei em site que logo estará no ar e funciona bem, mas será que não é possível desenvolver um desse para o :focus e quem sabe para as outras pseudo classe?
E a pergunta fica no ar…se um arquivo desse concerta um dos muito bugs do ie6 então porque a Microsoft não lança algum path para corrigir esse erro, nem que pra isso fosse preciso chamar alguns desses arquivos automaticamente?