Archive for the ‘chrome’ Tag

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