Postado por Micox - Náiron J. C. G..

06 Março, 2008

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.

Marcadores: bugs, bugs_ie, webstandards

E-mail Newsletter Feed RSS Resultado! Concursos Shopping Resultado

Não mande dúvidas nos comentários ou no meu e-mail. Mande elas para o fórum de desenvolvedores Webly. Tem mais gente lá gabaritada a responder e você não fica dependendo só do mico.

Comenta aí! Não cai o dedo e me incentiva a escrever mais. (17 comentários)

17 Comentários:

Pedro disse... 07 Março, 2008 08:20: Show de bola, muito show, isso aí vai ajudar e muito!!!
Nand0 disse... 17 Março, 2008 11:49: 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
Micox - Náiron J. C. G. disse... 18 Março, 2008 07:49: 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.
Elbrinner disse... 04 Julho, 2008 10:19: 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
Micox - Náiron J. C. G. disse... 04 Julho, 2008 10:22: sao expression javascript. soh funfa no IE
James Clebio disse... 11 Julho, 2008 10:33: 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
Micox - Náiron J. C. G. disse... 11 Julho, 2008 13:08: Ué, é só olhar o exemplo heheh

#geral #menu div.principal:hover ul a, #geral #menu div.principal.hover ul a
Isacc Araújo disse... 08 Dezembro, 2008 08:27: 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.
Micox - Náiron J. C. G. disse... 08 Dezembro, 2008 08:31: É verdade Isacc, percebi isto a poucos dias aqui no Google Crohme.
Vou atualizar a postagem e avisar.
Valeus pelo lembrete.
Igor_Cardoso disse... 04 Fevereiro, 2009 14:13: Opa, testei este metodo aqui, so tive um problema, ficou estremamente lento, isso é normal?
Micox - Náiron J. C. G. disse... 04 Fevereiro, 2009 14:35: 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.
julitchamaia disse... 10 Fevereiro, 2009 10:52: execelente! mt obrigada!
BSB DANÇA disse... 16 Fevereiro, 2009 23:21: 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/
Jefferson disse... 17 Março, 2009 14:26: 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!
Anônimo disse... 02 Junho, 2009 22:35: 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?!?!?
Micox - Náiron J. C. G. disse... 03 Junho, 2009 07:30: É 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.
Anônimo disse... 03 Junho, 2009 08:21: muito obrigado pela resposta!
Att
Eduardo

Escreva seu comentário (Leia abaixo).

Deixe seu email se quiser resposta por email também, pois o sistema de comentários do Blogger não me informa :( ... Ah, também pode deixar o endereço do seu blog ou site no comentário.
Já estou em outro sistema de blog melhor (wordpress). Se quiser comentar lá também :)
Dúvidas, só no fórum Webly.