+- Forum Pplware (http://forum.pplware.com)
+-- Fórum: Mais Tech (/forumdisplay.php?fid=11)
+--- Fórum: Programação e Web (/forumdisplay.php?fid=16)
+---- Fórum: Guias e Tutorials (/forumdisplay.php?fid=38)
+---- Tópico: [tutorial] Como alterar javascript/css de acordo com o browser... (/showthread.php?tid=5394)
[tutorial] Como alterar javascript/css de acordo com o browser... - asantos3 - 20-03-2010 17:31
Bem a ideia é simples, todos os webmasters que trabalhem habilmente para todos os browsers já se depararam que o Internet Explorer têm outro "motor" diferente do FF, Chrome e outros...
Essa coisinha chata que é o "motor" do browser no caso do ie traz muitas dores de cabeça quer a programar páginas em css ou mesmo em javacript...
Ou seja iremos ter de fazer dois códigos css ou javacript diferentes para o ie e outros... Muitos webmasters amadores não sabem mas em vez de fazer isso fazem apenas a página para o ie (que fica horrivel...) e para isso é que trago o seguinte código que irá solucionar o problema...
Para css, é fácil e simples, é muito conhecido por muitos webmasters:
Código:
<link rel="stylesheet" type="text/css" href="css.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css-ie7.css" />
<![endif]-->Nota: o <!--[if IE]> pode ser modificado para:
- <!--[if IE 7]> vai aplicar o código ao internet explorer (ie) 7
- <!--[if lt IE 6]> vai aplicar o código a versões anteriores ao ie 6
- <!--[if lte IE 6]> vai aplicar o código a versões anteriores e iguais ao ie 6
- <!--[if gt IE 8]> vai aplicar o código a versões posteriores ao ie 8
- <!--[if gte IE 8]> vai aplicar o código a versões posteriores e iguais ao ie 8
- <!--[if eq IE 8]> vai aplicar o código a versões iguais ao ie8
E claro que o browser escolhido não têm de ser IE podendo ser Firefox <!--[if Gecko]>
- 'IE' - Internet Explorer
- 'Gecko' - Browsers baseados no Gecko (Firefox, Camino etc)
- 'Webkit' - Browsers baseados em Webkit (Safari, Chrome, Shiira etc)
- 'SafMob' - Mobile Safari (iPhone / iPod Touch)
- 'Opera' - Opera
- 'IEMac' - Internet Explorer para Mac
- 'Konq' - Konqueror
- 'IEmob' - IE mobile
- 'PSP' - Playstation Portable
- 'NetF' - Net Front
E já agora o website http://conditional-css.com/ traz muita informação relativa...
Para Javascript, pela minha experiência apenas precisei de mudar os ficheiros .js no ie e protanto só conheço este código mas poderão dizer outros:
Código:
<script type="text/javascript" src="javascript.js">var ie = 0;</script>
<!--[if IE]>
<script type="text/javascript" src="javascript_ie.js">ie = 1;</script>
<![endif]-->RE: [tutorial] Como alterar javascript/css de acordo com o browser... - Bruno Bernardino - 11-04-2010 10:44
Se usarmos jQuery, existe um objecto muito prático, em que cada atributo (que representa um browser) retorna um booleano, o browser.
Pode ser usado facilmente como, por exemplo, if ($.browser.msie) {/* código IE */} ou também se pode aplicar a versão desejada com o $.browser.version (atenção que retorna a versão completa).
Mais formas de utilização e exemplos na página da API do jQuery para a propriedade browser.
Se não utilizarmos jQuery, podemos sempre utilizar o navigator.userAgent do JavaScript.
Podem ver uma explicação detalhada de como usar o userAgent para determinar o browser.
Ou então aqui podem ver uma função mais completa de detecção do browser e sistema operativo utilizando javascript.
RE: [tutorial] Como alterar javascript/css de acordo com o browser... - xOy - 12-04-2010 22:35
Interessante utilizar ifs em HTML... já conhecia....
...agora o mundo do jQuery isso será o meu proximo passo...
RE: [tutorial] Como alterar javascript/css de acordo com o browser... - asantos3 - 12-04-2010 22:58
claro que em jquery existe mais potencialidades mas para coisas simples é bem melhor a hipótese que pus
jquery is the library of god
RE: [tutorial] Como alterar javascript/css de acordo com o browser... - marceloalves - 30-06-2010 14:47
Usar esses recursos nas app web é bom, mas não podemos esquecer que os robôes de indexação (Google, Yahoo!, etc.) são usuários sem olhos.
Portanto, acima de tudo, temos que lembrar da qualidade das informações, certo?
RE: [tutorial] Como alterar javascript/css de acordo com o browser... - asantos3 - 05-08-2010 21:13
estava para aqui a trabalahr com a propriedade absolute e vi que o tutorial que pus a cima não dava para opera... portanto aqui vai uma solução muito melhor para css:
http://www.tvidesign.co.uk/blog/CSS-Browser-detection-using-jQuery-instead-of-hacks.aspx
RE: [tutorial] Como alterar javascript/css de acordo com o browser... - Felipe Andres - 20-07-2011 17:02
Excelente dica!
Eu visitei o site do CSS conditional, mas pra mim não ficou muito claro o procexso de instalação,,
Alguém ai consegiu instalar direitinho e usar?