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.
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
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!
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. 🙂
É 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!
brother, o meu só funcionou usando o hack desse site: http://dimox.net/personal-css-hacks-for-ie6-ie7-ie8/comment-page-3/#comment-1533
Valeu cara, post bem resumido e direto.. Funcionou muito bem pra mim.. Obrigado