Forum Pplware

Versão Completa: [tutorial] Como alterar javascript/css de acordo com o browser...
Está de momento a ver uma versão reduzida do nosso conteúdo. Ver versão completa com o formato adequado.
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]-->
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.
Interessante utilizar ifs em HTML... já conhecia....

...agora o mundo do jQuery isso será o meu proximo passo... Smile
claro que em jquery existe mais potencialidades mas para coisas simples é bem melhor a hipótese que pus Tongue
jquery is the library of god LOL
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?
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
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?
URL's de Referência