CSS hack para Google Chrome e Safari

Aqui fica uma dica simples mas bastante útil na minha opinião para quem faz conversões de layout em template xHTML e CSS. O uso de hacks não é recomendado, deve apenas recorrer a estas apenas em último recurso ou para corrigir um bug do browser. Dito isto, vamos passar à dica, esta hack serve para criar regras CSS específicas para os browsers Google Chrome e Safari, para uma melhor demonstração irei colocar uma demo.

Código HTML

<body>
<h1>CSS para Chrome e Safari</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</body>

Código CSS

/* Regra CSS para Internet Explorer e Firefox */
body {background-color: #CCC;}
h1 {color: #069;}
p {color: #3C9;}
/* Regra CSS apenas para Safari e Chrome */
@media screen and (-webkit-min-device-pixel-ratio:0){
body {background-color: #FFF;}
h1 {color: #F00;}
p {color: #CF6;}
}

Podem ver o resultado final aqui. Espero que gostem, e não se esqueçam, apenas utilizem hacks em último recurso, qualquer dúvida ou sugestões não hesitem em comentar.

7 thoughts on “CSS hack para Google Chrome e Safari”

Fico grato, aqui funcionou, outras hack que encontrei na internet interferiam no firefox, essa não intereferiu, funcionou certinho para o detalhe que bati muita cabeça tentando arrumar. Obrigado amigo!

Reply ↓