Como utilizar um css para o IE e outro para o Firefox?

Olá Pessoal!

Todos nós sabemos que o Internet Explorer hoje em dia não está só no mundo dos navegadores para internet, existem diversos outros navegadores que também são excelentes e rápidos, mas o mais utilizado é o Firefox.

Vou mostrar-lhes algumas técnicas para carregar um CSS diferente para o Internet Explorer 6 ou o novo IE 7, que geralmente é usado para aplicar hacks. Abrindo um parênteses, hacks são códigos utilizados nas folhas de estilo CSS para que navegadores interpretem de forma correta o código para o nosso layout que foi escrito no CSS original.

Geralmente o pessoal programa em um navegador a sua folha de estilo e logo após aplica os hacks para o IE (Internet Explorer) 6 ou 7, pois este interpreta de forma diferente os códigos do CSS (coisas da Microsoft).

Após escrevermos nossa folha de estilo, aplicamos em nossa página com o seguinte código:

<style type="text/css" media="screen">
@import "/Css/topo.css";
@import "/Css/conteudo.css";
@import "/Css/rodape.css";
</style>

Veja que eu estou utilizando este código dentro da tag

<HEAD>

Agora para que o nosso IE interprete o nosso hack, incluímos o seguinte código logo após a definição de nossa folha original:

<!--[if lte IE 6]>
<style type="text/css" media="screen">
@import "../_Resource/Css/hacks_ie6.css";
</style>
<![endif]-->

(Hacks para o IE 6)

e

<!--[if IE 7]>
<style type="text/css" media="screen">
@import "../_Resource/Css/hacks_ie7.css";
</style>
<![endif]-->

(Hacks para o IE 7)

Note que nenhum outro browser, inclusive o Firefox, irá interpretar este trecho de código como se fosse uma importação a nossa folha de estilo, apenas o IE 6, no primeiro caso, e IE 7, no último.

O código final de nossa página importando as folhas de estilo original e os Hacks para o IE6 e IE7 poderia ser escrito da seguinte forma:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br" xml:lang="pt-br">
<head>
<title>CodigoFonte.net</title>

<style type="text/css" media="screen">
@import "../_Resource/Css/topo.css";
@import "../_Resource/Css/conteudo.css";
@import "../_Resource/Css/coluna_relacional.css";
@import "../_Resource/Css/coluna_menu.css";
@import "../_Resource/Css/rodape.css";
@import "../_Resource/Css/outros.css";
</style>

<!--[if lte IE 6]>
 <style type="text/css" media="screen">
@import "../_Resource/Css/hacks_ie6.css";
 </style>
 <![endif]-->
  
<!--[if IE 7]>
 <style type="text/css" media="screen">
@import "../_Resource/Css/hacks_ie7.css";
 </style>
 <![endif]-->
</head>

<body>

<div id="topo"> Todo do site </div>
<div id="conteudo"> Conteúdo do site </div>
<div id="rodape"> Rodapé do site</div>

</body>
</html>

Pronto. Agora podemos construir nossa página que será compatível com os navegadores Firefox e IE6 e 7 :D

Até a próxima.

Enviar um Artigo

Enviado por: Emmanuel

Outros artigos

Assine o Feed desta categoria

Modificando o cursor com CSS - 25/03/2004
CSS em Formularios - 17/04/2004
CSS - Folhas de estilo em cascata - 16/02/2004
Sintaxe das regras CSS - 15/02/2004
Ver mais...

Comentários do artigo [Novo comentário]

Nenhum comentário, seja o primeiro a comentar.

Para adicionar um comentário você deve efetuar o login

» Procurando iPhones?
... e que tal iPods?

Melhor Visualizado com
800x600 de Resolução

Gostou do CódigoFonte.net? Quer indicar a um amigo? Preencha os campos a seguir.
Seu Nome:
Seu E-mail:
E-mail de seu Amigo:

Login:
Senha: