tadarank afiliados

06 março, 2008

Ativando .hover e .first-child no IE 6 - um novo método

Tamo de volta malucada

Todos aqui devem saber que as pseudo-classes do CSS 2 :hover e :first-child não funcionam direito no IE6 né? A hover só funciona em links.

Porém vossas senhorias já devem conhecer inúmeras ténicas secretas ninja para simular as pseudo classe hover e first-child no IE 6 né? Técnicas com javascript simples, técnicas com libs javascript, arquivo htc, etc

Abaixo eu mostro uma nova técnica que o mico inventou enquanto estava desenvolvendo sua Micox-mini-css-lib (em breve em um blog perto de você).

A vantagem da minha criança é que ela pode ser colocada direto no seu CSS, em qualquer lugar dele (de preferencia no começo). Ela é baseada em javascript dentro do CSS.

Para ativar, você deve usar as classes .hover em conjunto com a :hover OU .first-child em conjunto com a :first-child nos elementos onde deseja o efeito. Tipo assim:

li:first-child , li.first-child { color: red }

Abaixo, o código que faz a mágica e deve ser colocado no começo FINAL do seu css. Quem não entender me pergunta nos comments.

Micox Pseudo-class-css2 to IE (MXPC)

/* Micox Pseudo-class-css2 to IE (MXPC). Activate .hover and .first-child in IE 6 
   Deixe isto ao final de tudo do seu CSS pois o Webkit não interpreta nada mais abaixo do expression
*/
* html * { color: expression( (function(who){ if(!who.MXPC){
 who.MXPC = '1';
 if(who.nodeName != 'A'){
  who.onmouseenter=function(){ who.className += ' hover'};
  who.onmouseleave=function(){ who.className = who.className.replace(' hover','')}; }
 (who==who.parentNode.firstChild) ? who.className += ' first-child' : '' ;
} } )(this) , 'auto') }

/* example */
p:first-child , p.first-child { color: red }
li:hover a , li.hover a { background-color: blue }

"Viiixxxxxx maria, onde eu coloco isso mico?" - Não tema o código Sr.! Apenas coloque ele no começo FINAL do seu CSS. Veja esta página de exemplo e zóie o código fonte dela.

O bom é que esta idéia do expression pode ser usada para outras gambiarras também. Em breve eu devo voltar com mais.

Em breve tô de volta. Té mais.

Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.

18 comentários:

  1. Show de bola, muito show, isso aí vai ajudar e muito!!!

    ResponderExcluir
  2. Coloquei esse código no meu css e mesmo assim não funcionou =/ to usando teus exemplos de menu, no firefox fica perfeito, no ie7 ele da uma quebrada no layout e no ie6 não funciona =/

    o link da página é www.tchepeleia.com.br/testes tem como me dar uma ajuda?

    VLw

    ResponderExcluir
  3. Nand0, vi rapidamente e acho que seu problema é com a montagem do menu UL-LI que não está no mesmo formato UL-LI-A. Veja direitinho no meu exemplo, pode ser que seja isto.
    Não posso analisar mais a funto agora pois estou em viajem. Poste lá no fórum webly. Em breve eu to de volta.
    Té mais.

    ResponderExcluir
  4. Ainda não tive tempo de testar mais bateu a dúvida. Que porraria você colocou no código ( A forma de falar é só uma forma de destacar.)

    Eu estou vendo um if dentro do CSS, nunca vi nada assim.

    parabéns

    ResponderExcluir
  5. sao expression javascript. soh funfa no IE

    ResponderExcluir
  6. muito bacana! mas micox, e se eu tiver uma classe já definida para um elemento...

    #geral #menu div.principal:hover ul a

    Como aplico o hover pra ie6 nisso aí?

    ;D

    ResponderExcluir
  7. Ué, é só olhar o exemplo heheh

    #geral #menu div.principal:hover ul a, #geral #menu div.principal.hover ul a

    ResponderExcluir
  8. Micox, seu código é ótimo, funciona perfeitamente. Parabéns, e muito obrigado por disponibilizá-lo para nós. Mas ele deve ser usado sempre no final do arquivo CSS, pois o interpretador CSS do WebKit não lê nenhum código que vem depois dele.

    ResponderExcluir
  9. É verdade Isacc, percebi isto a poucos dias aqui no Google Crohme.
    Vou atualizar a postagem e avisar.
    Valeus pelo lembrete.

    ResponderExcluir
  10. Opa, testei este metodo aqui, so tive um problema, ficou estremamente lento, isso é normal?

    ResponderExcluir
  11. Sim, Igor, infelizmente é normal sim.
    Mas para melhorar a velocidade existe uma forma muito fácil: melhorar a especividade do seletor.

    O seletor atual é: * html *
    O que gera lentidão pois varre em um loop eterno todos os elementos.

    Em vez disso use algo como:
    * html #div_pai_elems_alvo *

    Ou:
    * html tag_elems_alvo

    ou melhor ainda:
    * html #div_pai_elems_alvo tag_elems_alvo

    Isto elimina praticamente a lentidão.

    ResponderExcluir
  12. Olá meu amigo tudo bem?!
    estou com um problemão,meu blog funciona 100% do jeito que eu quero no firefox, mas no IE 6 ele não abre o menu drop down e no IE 7 as 2 colunas laterais e a do post ficam em cima do menu, o que posso fazer pra resolver isso ? ta me dando muita dor de cabeça e eu não entendo muito desses codigos e como aplicalos no blogspot. Se puder me ajudar fico muito feliz, ta ai a pagina teste do meu blog http://textdanca.blogspot.com/

    ResponderExcluir
  13. Excelente!!!
    Meus parabéns, nota 10 para post, exemplo e pela criação!
    Estou com alguns problemas agora no layout, mas deve ser problema de IE mesmo... grato pelo códio!

    ResponderExcluir
  14. olá! boa noite!
    Help me please!!!

    Qdo coloco esse código e vou executar no IE ele dá aquela mensagem que o internet explorer impediu esse site de exibir conteúdo....bla bla bla...

    o q devo fazer?!?!?

    ResponderExcluir
  15. É porque vocÊ está rodando localmente, daí ele dá esta mensagem mesmo para qualquer javascript na página.

    Para não ter esta mensagem, só hospedando a página online.

    ResponderExcluir
  16. muito obrigado pela resposta!
    Att
    Eduardo

    ResponderExcluir
  17. Mas desse jeito não tá problema com os padrões da w3C?
    Tipo eu sempre pensando nessa possíbilidade passei a criar usando mouseover e mouseout com jQuery por ser mais rápido e tals. Mas independente da minha preferência é muito show essa forma! Parabéns!

    ResponderExcluir

Resultado! Concursos