Colocar Resposta 
 
Avaliação do Tópico:
  • 1 votos - 5 Média
  • 1
  • 2
  • 3
  • 4
  • 5
[tutorial] Como alterar javascript/css de acordo com o browser...
20-03-2010, 17:31 (Esta mensagem foi modificada pela última vez a: 20-03-2010 17:41 por asantos3.)
Mensagem: #1
[tutorial] Como alterar javascript/css de acordo com o browser...
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]-->

Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
11-04-2010, 10:44
Mensagem: #2
RE: [tutorial] Como alterar javascript/css de acordo com o browser...
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.

BrunoBernardino.com
Visitar Website de este utilizador Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
12-04-2010, 22:35
Mensagem: #3
RE: [tutorial] Como alterar javascript/css de acordo com o browser...
Interessante utilizar ifs em HTML... já conhecia....

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

Website: iCarneiro | Twitter: ycarneiro
Visitar Website de este utilizador Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
12-04-2010, 22:58
Mensagem: #4
RE: [tutorial] Como alterar javascript/css de acordo com o browser...
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

Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
30-06-2010, 14:47
Mensagem: #5
RE: [tutorial] Como alterar javascript/css de acordo com o browser...
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?

Marcelo Alves
Brazil EEK!
Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
05-08-2010, 21:13
Mensagem: #6
RE: [tutorial] Como alterar javascript/css de acordo com o browser...
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

Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
20-07-2011, 17:02 (Esta mensagem foi modificada pela última vez a: 22-07-2011 13:51 por Felipe Andres.)
Mensagem: #7
RE: [tutorial] Como alterar javascript/css de acordo com o browser...
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?
Procurar todas as mensagens deste utilizador
Citar esta mensagem numa resposta
Colocar Resposta 


Saltar Fórum:


Utilizadores a ver este tópico: 1 Visitante(s)