Hack para Safari 4, Firefox 3.5, Chrome 3 e muito mais com um JS
Posted on : 02-09-2009 | By : Tilo | In : Tutoriais
0
Que o IE6 é um lixo, todo mundo sabe, agora, o que você faz quando os browsers que você confia te deixam na mão? Pois é, na ultima semana descobrimos que FF 3.5, Safari 4 e Chrome 3 estão renderizando de forma diferente, ai o que fazer? Bem, minha sugestão era ir ao banheiro, e chorar por 2 minutos sozinho no escuro, porem hoje o Alister chegou com a solução milagrosa um JS muito simples que faz uma coisa bem bacana.
A idéia é colocar uma classe na tag <HTML> com o nome do navegador utilizado, o JS dá suporte aos seguintes Browsers:
.ie – Internet Explorer (All versions)
.ie8 – Internet Explorer 8.x
.ie7 – Internet Explorer 7.x
.ie6 – Internet Explorer 6.x
.ie5 – Internet Explorer 5.x
.gecko – Mozilla, Firefox (all versions), Camino
.ff2 – Firefox 2
.ff3 – Firefox 3
.opera – Opera (All versions)
.opera8 – Opera 8.x
.opera9 – Opera 9.x
.konqueror – Konqueror
.webkit or safari – Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
.chrome – Google Chrome
Imagina que agora na herança você tem uma classe com o nome do browser, basta agora você colocar uma classe antes do seletor que você deseja fazer o hack.
Exemplo:
.ie .example {
background-color: yellow;
}
.ie7 .example {
background-color: Orange;
}
.gecko .example {
background-color: Gray;
}
.win.gecko .example {
background-color: Red;
}
.linux.gecko .example {
background-color: Pink;
}
.opera .example {
background-color: Green;
}
.konqueror .example {
background-color: Blue;
}
.safari .example {
background-color: Black;
}
.chrome .example {
background-color: Cyan;
}
.example {
width: 100px;
height: 100px;
border: 1px solid black;
}
<div class=”example”>Teste</div>
<script src="css_browser_selector.js" type="text/javascript"></script>
Uma forma simples de fazer, e que evita o uso de hack’s que poluem o código, e atrapalham na validação.
Para baixar o JS
Para ver um exemplo funcionando
Para seguir o Alister no Twitter
