|
Um CSS para o Firefox e outro para o Internet Explorer |
|
|
|
|
Por Wallace Rodrigues
|
|
25 de agosto de 2007 |
 Oi pessoal!
Muita gente por aí se pergunta: "Como usar um CSS para navegadores como Firefox e Opera, e outro para o Internet Explorer?". A verdade é que existem várias maneiras de fazê-lo, mas eu acredito que a maneira mais eficaz é sempre desenvolver seu website usando o Firefox ou Opera como a plataforma de testes. Mesmo que o teu site pareça totalmente "quebrado" no Internet Explorer (IE), navegadores como Firefox são mais compatíveis com os standards do W3C, e isso significa que o teu site terá maior consistência no layout em diferentes plataformas.
Depois que o desenvolvimento do site estiver pronto, é hora de fazer alguns ajustes no CSS para que o IE mostre o site da mesma maneira que no Firefox. Internet Explorer irá traduzir a maior parte do CSS corretamente, daí que não há sentido em fazer uma versão diferente para cada navegador (exceto se os estilos tiverem propriedades diferentes). A solução então será fazer exceções. Para aplicar as exceções do estilos CSS ao IE, é necessário adicionar uma linha em sua página HTML:
Se você usa um CSS externo (recomendado):
<link href="/css/estilo.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]>
<link href="/css/estilo_i6.css" rel="stylesheet" type="text/css" />
<![endif]-->Se você prefere um CSS na própria página:
<link href="/css/estilo.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]>
<style type="text/css">
body {color: #000;}
</style>
<![endif]-->OBS: esse codigo deve ser inserido dentro da tag <head> em seu codigo HTML. Em outras palavras, entre <head> e </head>Note que o CSS global, que é usado por todos os navegadores deve vir antes do CSS para o IE no seu código HTML. Isso é devido ao fato que os estilos são carregados nessa ordem pelo navegador. Então, uma classe que tenha uma propriedade não compatível com o IE no CSS global, será recarregada com outras propriedades no CSS do IE. Para que isso funcione, as duas classes deverão ter o mesmo nome em ambos os documentos CSS, por exemplo:
/* CSS global */
.suaClasse {
color: #000;
margin-left: 15px;
}
/* CSS do IE6 */
.suaClasse {
margin-left: 0;
}No exemplo acima, todas as tags que levam a classe ".suaClasse" terão margens de 15 píxels à esquerda em todos os navegadores, mas não no IE6. Isso porque a propriedade "margin-left" no CSS do IE6 ignora a propriedade "margin-left" no CSS global, já que o CSS do IE6 foi carregado depois do CSS global.
Note também que a propriedade da cor da classe ".suaClasse" não foi alterado no IE6. Já que essa propriedade não é uma causa de conflitos no layout, ela não foi re-definida no CSS do IE6. Portanto, a cor da fonte para esta classe continua sendo a mesma.
Seguindo este princípio, você poderá definir somente as exceções necessárias no CSS do IE para que o teu layout apareça com consistência em todos os navegadores - inclusive o IE. 
Abraços,
Wallace
 |
|
Última Atualização ( 26 de agosto de 2007 )
|
Comentários RSS Feed
