Hacks de CSS para todos os principais navegadores

Hacks de CSS são códigos especiais que são colocados no CSS para que determinada regra funcione apenas em determinado navegador.
Aqui está uma lista de hacks para os seguintes navegadores:

Hack para o Internet Explorer 6 (IE6)
Underline na frente do estilo. Exemplo:

ul li {
      _color:#F0F; 
}

Hack para o Internet Explorer 6 e Internet Explorer 7 (IE6/IE7)
Asterisco na frente do estilo. Exemplo:

ul li {
      *color:#F0F; 
}

Hack para o Internet Explorer 7 somente (IE7)
Deve-se aplicar o Hack acima para IE6 e IE7 e após este, aplicar o Hack IE6, retirando a propriedade. Exemplo:

ul li {
      color:#000; /* Cor preta para todos os navegadores */ 
      *color:#F0F; /* Cor rosa para o IE7 */  
      _color:#000; /* Cor preta para o IE6 */
}

Hack para o Internet Explorer 8
“Bonecão-do-posto” no final do parâmetro (é o número 0 e não a letra O). Exemplo:

ul li {
      color:#F0F\0/;
}

Hack para o Internet Explorer 9
Envolver a regra com a linha de código @media all and (min-width:0) e acrescentar o “bonecão-do-posto” no final do parâmetro. Exemplo:

@media all and (min-width:0) {
      ul li {
            color:#F0F\0/;
      }
}

Hack para Firefox
Envolver a regra com a linha de código @-moz-document url-prefix(). Exemplo:

@-moz-document url-prefix(){
      ul li {
            color: #F0F; 
      }
}

Hack para Chrome e Safari
Envolver a regra com a linha de código @media screen and (-webkit-min-device-pixel-ratio:0). Exemplo:

@media screen and (-webkit-min-device-pixel-ratio:0){
      ul li {
            color:#F0F;
      }
}

Hack para Opera
Envolver a regra com a linha de código @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0). Exemplo:

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
      ul li {
            color: #F0F; 
      }
}

Observação: Na minha modesta opinião, todas as coisas podem ser feitas em todos os navegadores sem o uso de hacks (com raras exceções). Mas isto, somente a experiência e o tempo podem dar a capacitação.

Anúncios

6 comments so far

  1. m2designers on

    Legal.
    Mas prefiro o meu método:
    #ie.v7-0 { /* só pro IE 7 */}
    #ie.v8-0 { /*só pro IE 8 */ }
    #ie { /*pra todos os IE */ }
    #ff.v6-0 { /*só pro firefox 6*/ }
    #ff { /*qlqr firefox*/ }
    e assim vai pra #safari, #chrome, #opera e qlqr outro navegador

    • thiagobfiorenza on

      E qual verificação você faz pra saber que a id #ie.v7-0 por exemplo somente será utilizada no IE7??? Abraço e obrigado pelo comentário!

  2. m2designers on

    Adiciona uma ID na HTML com o nome do browser, e uma classe com a versão. Pra verificar, usa um script php ou js (ou qlqr outra lang) que leia a useragent com um regex, e retorne o nome e/ou a versão do browser. Depois é só colocar #ie.v7-0 antes de qualquer declaração de estilo no CSS que quer usar somente pra aquele browser e deu. 🙂

    • thiagobfiorenza on

      É um ótimo método!! Sugiro apenas utilizar classe em vez de id, já que cada página deve possuir apenas uma id única.

      Porém, no meu post, quis falar de soluções utilizando apenas CSS.

      Abraço!

  3. Daniel on

    Valeu cara, post bem resumido e direto.. Funcionou muito bem pra mim.. Obrigado


Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s

%d blogueiros gostam disto: