Em desuso. Esse código está ultrapassado em nosso padrão, então evitamos usá-lo.
Fugindo um pouco de soluções específicas para o IE6 (já estava ficando cansativo!) vamos mostrar como fazer um hack específico para o navegador Safari e Google Chrome.
Sim, nós sabemos que usar hacks é “feio”, mas estamos aqui para apresentar soluções e, caso essa seja sua última opção, use!
Como os dois browsers utilizam a mesma engine de renderização, a Webkit, este hack acaba servindo para os dois navegadores:
body:nth-of-type(1) elemento { propriedade: valor; }
—–
* Update: Post atualizado, pois o hack antigo era interpretado pelo o IE7 também. Este novo método funciona somente para os navegadores Google Chrome e Safari.
* Update: Solução nos comentários, alguns usuários comentaram a mesma solução, conforme a necessidade verifique esses comentários, pois raramente fazemos ajuste apenas no chrome.
16 comentários
Responderlinke disse:
Para quem ADORA hacks vai uma lista útil para todos os browsers: Aí vai!
/*— HACK MULTIPLO —*/
.hacks_css { border: 10px black solid; } /* esse serve pra todo mundo */
html*.hacks_css {
border: 10px green solid; /* ie7 */
]border: 10px blue solid; /* chrome */
}
* html .hacks_css { border: 10px green solid; } /* ie6 */
Iúri Florisbal disse:
esse hack afeta o firefox, ou seja, arruma um e estraga o outro.
alguém teria outra solução ?
Tiago Celestino disse:
Essa solução funciona
@media screen and (-webkit-min-device-pixel-ratio:0){
p {color: #00ff00;}
}
Brunno dos Santos disse:
Cara… nem a solução do post (que afeta o Firefox) e nem a solução do Tiago (que simplesmente não funciona) deram certo!
Ainda estou buscando um hack para o webkit…
Brunno dos Santos disse:
@Brunno dos Santos: Opa foi mal!! A solução do Tiago funciona sim!!
Agni disse:
Realmente esse Hack afetou mesmo o firefox tbm… e não entendi bem como aplicar esse hack do @Tiago Celestino em um elemento específico… algum exemplo mais claro?
Abçs
Carol disse:
Pessoal segue um que funciona e ta bem explicadinho!
@media screen and (-webkit-min-device-pixel-ratio:0) {
.myClass { background-color: #FF0000; }
#myId {color: #0000FF;}
p, a, li {text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
}
Carol disse:
fonte : http://www.evotech.net/blog/2008/09/css-hack-for-google-chrome-and-safari-31/
ops!
brunorios disse:
@Tiago Celestino: valeu tiago!!!
Anderson disse:
A antiga solução body:nth-of-type(1) elemento {propriedade:valor} ainda pode ser usada sem interferencia no firefox, apenas utilize o webkit junto, ex:
@media screen and (-webkit-min-device-pixel-ratio:0) {
body:nth-of-type(1) elemento {propriedade:valor}
}
walmir555 disse:
Valeu Tiago !
Forte abraço a todos !
Luiz Henrique Zanão Kota disse:
Boa dica para ser utilizado em último caso! Só ficou um pouco estranho um blog de Webstandards ensinando a fazer Hack, mas…
Edson disse:
Xiiii o Firefox 4 tá “pegando” esse tb!
Matheus Cardoso disse:
@Tiago Celestino: Esta sempre funciona, só lembrando que ela é para o google chrome e para safari,
exe:
@media screen and (-webkit-min-device-pixel-ratio:0){
#campo_news input{background-color: transparent;border: 0 none;margin-left: 10px;margin-top:3px; width: 200px;}
}
#cadastra_news{float:right; width:11px; height:14px; background-image:url(“../img/bt_cadastra_news.png”); margin-right:3px; margin-top:3px;}
Laliel disse:
@Tiago Celestino:
ow thiago valeu!!! estava tentando achar em diversos lugares, e não estava encontrando!!! obrigada!!!! deu certo aqui |:D
Ronaldo santos disse:
galera eu ja tenho um codigo css pronto e funcionando no IE.. como faço para aplicar essas hacks para que ele funcione tbm no chrome e safari.. ? obrigado