[tutorial] Como alterar javascript/css de acordo com o browser...

[asantos3]

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
  

Este truque pode ser implementado logo no css como exemplo: http://conditional-css.com/demo/demo.css
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]-->

[Bruno Bernardino]

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.

[xOy]

Interessante utilizar ifs em HTML... já conhecia....

...agora o mundo do jQuery isso será o meu proximo passo...

[asantos3]

claro que em jquery existe mais potencialidades mas para coisas simples é bem melhor a hipótese que pus
jquery is the library of god

[marceloalves]

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?

[asantos3]

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-Brow...hacks.aspx

[Felipe Andres]

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?