Blog Web Standards

Soluções para os problemas enfrentados pelos desenvolvedores HTML e CSS no dia-a-dia

18 2009 fevereiro

Hack para Safari e Google Chrome

Autor: Carlitos em CSS, Hacks

Última modificação: 31 maio 2011

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

Responder
  1. 18 de fevereiro de 2009

    linke 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 */

  2. 3 de setembro de 2009

    Iúri Florisbal disse:

    esse hack afeta o firefox, ou seja, arruma um e estraga o outro.
    alguém teria outra solução ?

  3. 14 de janeiro de 2010

    Tiago Celestino disse:

    Essa solução funciona


    @media screen and (-webkit-min-device-pixel-ratio:0){
    p {color: #00ff00;}
    }

  4. 28 de abril de 2010

    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…

  5. 28 de abril de 2010

    Brunno dos Santos disse:

    @Brunno dos Santos: Opa foi mal!! A solução do Tiago funciona sim!!

  6. 22 de junho de 2010

    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

  7. 1 de julho de 2010

    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);
    }

  8. 1 de julho de 2010

    Carol disse:

  9. 21 de outubro de 2010

    brunorios disse:

    @Tiago Celestino: valeu tiago!!!

  10. 25 de outubro de 2010

    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}
    }

  11. 29 de novembro de 2010

    walmir555 disse:

    Valeu Tiago !
    Forte abraço a todos !

  12. 24 de março de 2011

    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…

  13. 25 de março de 2011

    Edson disse:

    Xiiii o Firefox 4 tá “pegando” esse tb! 🙁

  14. 8 de julho de 2011

    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;}

  15. 4 de agosto de 2011

    Laliel disse:

    @Tiago Celestino:

    @media screen and (-webkit-min-device-pixel-ratio:0){
    p {color: #00ff00;}
    }

    ow thiago valeu!!! estava tentando achar em diversos lugares, e não estava encontrando!!! obrigada!!!! deu certo aqui |:D

  16. 28 de novembro de 2011

    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

Escreva seu comentário