CSS Condicional para IE 6, 7 e 8
by CHR Designer on jul.22, 2009, under Web Designer
Olá pessoal fazia um tempo que eu não colocava nada sobre WebDesigner aqui no meu blog. Outro dia eu estava dando uma olhada e vi que a Ana postou no twitter dela falando que as pessoas quando recortão só pensão em um browser ai eu respondi “Para isso que existe CSS Condicional” então decidi fazer um post sobre isso. CSS Condicional para IE 6, 7 e 8. “na minha opinião o IE 6 deveria ter morrido faz tempo e também não tem browser melhor doque o FireFox“
Então vamos começar o que interessa eu criei um HTML bem simples com uma class chamada “padrao” em cada DIV.
<div class=”padrao”>CSS PADRÃO – VISUALIZADO NO FIREFOX</div>
<div class=”padrao”>O MESMO CSS PADRÃO MAS AGORA COM O IF PARA O IE 6</div>
<div class=”padrao”>O MESMO CSS PADRÃO MAS AGORA COM O IF PARA O IE 7</div>
<div class=”padrao”>O MESMO CSS PADRÃO MAS AGORA COM O IF PARA O IE 8</div>
depois de criada as DIV’s agora nós vamos criar um css chamado “padrao.css” e colocar ele dentro de uma pasta chamada css “eu gosto de sempre separar por pastas as coisas, tipo”css, js, imagens, etc’ ficá muito mas fácil de achar depois “
.padrao{
width:120px; Â /*determina a largura da div*/
height:160px;Â Â /*determina a altura da div*/
background:#ededed;Â Â /*determina a cor do fundo da div*/
float:left;Â Â /*determina que a div vai ficar a esquerda*/
border:1px solid red;Â Â /*determina uma borda de 1px de largura na div*/
margin:10px; /*determina que a div vai ficar 10px de distância do topo, da direita e esquerda e do rodapé*/
font-family:Arial;Â Â /*determina a familia da fonte como Verdana, Tahoma, etc…*/
font-size:11px;Â Â /*determina que a fonte vai ter 11px de altura*/
text-align:justify;  /*determina que a fonte vai ficar no modo de formatação justificado*/
padding:10px;  /*determinada que o texto vai ficar a 10px de distância das bordas da div que ela se encontra*/
}
depois que criado o arquivo padrao.css vamos chamar o css na página desejada, antes de fechar a tag “</head>” vamos colocar a tag “<link>”
<link rel=”stylesheet” href=”css/padrao.css” type=”text/css” />
mas presta muita atenção no caminho do CSS se você estiver com dúvida qual o caminho certo é só prestar atenção no nome da pasta e do arquivo onde ele se encontra, o meu está na pasta CSS e com o nome padrao.css - ” href=”css/padrao.css” “
Depois que estiver tudo OK vamos colocar os IF’s para os IE’s eles vão abaixo do
“<link rel=”stylesheet” href=”css/padrao.css” type=”text/css” />”
que acabamos de colocar, primeiro eu vou colocar do IE 8 e também já criei o arquivo css com o nome ie8.css na pasta CSS.
<!–[if gte IE 8]>
<link rel=”stylesheet” href=”css/ie8.css” type=”text/css” />
<![endif]–>
eu fiz uma pequena alteração no css padrão que criamos primeiro só para ver funcionando, mas a class ainda é .padrao no css, porque esse IF ele funciona assim, ele compara os dois CSS ele vai checando linha por linha do css se ele vê que você alterou alguma coisa ele automaticamente já pega as propriedades do novo atributo que determinamos no novo css… mas tem que ter o mesmo nome de class senão ele vai pensar que é outra coisa e vai passar direto, da uma olhada como ficou.
.padrao{
background:#F17447;
border:1px solid #AD6B00;
}
se vocês perceberam eu só coloquei os atributos que eu alterei porque não tem necessidade de manter os atributos se são iguais.
Para finalizar eu vou colocar o IF do IE 7 e do IE 6:
<!–[if IE 7]>
<link rel=”stylesheet” href=”css/ie7.css” type=”text/css” />
<![endif]–>
<!–[if lt IE 7]>
<link rel=”stylesheet” href=”css/ie6.css” type=”text/css” />
<![endif]–>
vocês vão perguntar porque os dois estão escritos IE7 mas se prestar atenção no IF do IE6 tem um ” lt” o que isso significa, o lt é uma abreviação de “less than” isto é que esse if só vai funcionar se for “menor que o IE7″ .
para os CSS eu vou alterar só o background e a borda, criei um arquivo para cada um dentro da pasta css com os nomes:
ie7.css
.padrao{
background:#FFFBCC;
border:1px solid #E6DB55;
}
ie6.css
.padrao{
background:#94E2FF;
border:1px solid #464646;
}
Para que vocês tenhão uma idéia melhor de como ficou acessem do seu FireFox, IE 6, IE 7 e o IE 8 pra ver como que ficou as DIVs. Qualquer dúvida é só deixar um comentário que eu respondo o mais breve possÃvel.
Visualizar -> CSS Condicional para IE 6, 7 e 8
Download -> CSS Condicional para IE 6, 7 e 8
agosto 5th, 2009 on 9:44
Excelente artigo! Me ajudou bastante em um projeto que estou trabalhando. Só uma coisa, o “lt” no css do IE6, acredito que seja abreveação de “less than” (menor que) e não de “last”.
Um abraço!
agosto 8th, 2009 on 9:27
Poxa valeu pelo toque Gustavo…já arrumei…e fico feliz que esse post te ajudou…e se você tiver outras duvidas é só manda um email para chrdesigner@chrdesigner.com
agosto 22nd, 2009 on 16:58
Fala Velho!
muito bom seu post! vc nao tem ideia de como salvou meu trabalho!
quebrei um pouco a cabeca para entender o que vc quis dizer com “precisa ter os mesmos atributos”.
eu estava usando para o firefox o float:left, como nao estava usando para o IE eu tirei e substitui pelo clear:both; só que desta forma, estava desalinhando tudo, entao ficou quebrando meu layout. ai eu li de novo seu post e tentei encontrar o “???” cheguei a um entendimento e escrevi o comando exatamente igual, mas como nao iria usar o float, setei ele como “none”. ai ficou perfeito.
realmente, independente se estiver usando ou nao, precisa repetir o atributo e seta-lo como none ou 0.
grande abraco
setembro 2nd, 2009 on 9:51
CHR Design, seu tutorial é REALMENTE um tutorial, porque explica minuciosamente como fazer de forma que qualquer leigo, e eu me incluo nesta categoria, possa entender. Ajudou-me bastante. Parabéns.
outubro 4th, 2009 on 13:58
Bem.. gostaria de saber, porque é que no internet explorer, os links não ficam da mesma cor que no firefox, estou fazendo um site, embora ainda não tenha grande experiência, e ao testar no internet explorer, os links não ficam da cor que eu queria, mas no firerox, apresentam-se exatamente da cor que escolho no dreamweaver. (quando visualizo na internet explorer mudam totalmente de cor) como posso resolver isso? pois queria que ficassem da mesma cor com que se apresentam no firefox. Obrigada pela ajuda.
Um abraço
outubro 6th, 2009 on 10:43
CHR Designer, entou com duvidas quanto a onde devo aplicar este codigo para que todas as paginas de meu site o vejam isntantaneamente ! pois o site é um pouco que complexo e a dificuldade que eu encontro é a de que não fui eu que o fiz, então logo sabe-se que não sei exatamente onde posso colocar este codigo! se estiver ao seu alcance e queira me ajudar, o endereço do website é : http://www.malicia.com.br
exatamente quando entramos pelo firefox, ou quando abrimos a pagina de assinantes o site desconfigura por total no i8 tambem !
aguardando seu contato, caso queira podemos nos comunicar por e-mail
abraço
Wagner Soler
outubro 8th, 2009 on 22:04
Olá Helana isso pode ser problema de cache do seu browser derrepente limpando ele pode arrumar esse problema… mas de todo caso eu fiz uma página mostrando como fazer um css bem simples de “a e a:hover” da uma olhada se ajuda:
http://chrdesigner.com/post/a_href/
outubro 8th, 2009 on 22:15
Ola PavOn…
Você vai colocar esse “codigo” dentro do header do seu site exemplo:
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/padrao.css" type="text/css" />
<!–[if gte IE 8]>
<link rel="stylesheet" href="css/ie8.css" type="text/css" />
<![endif]–>
<!–[if IE 7]>
<link rel="stylesheet" href="css/ie7.css" type="text/css" />
<![endif]–>
<!–[if lt IE 7]>
<link rel="stylesheet" href="css/ie6.css" type="text/css" />
<![endif]–>
</head>
já o porque que o site está quebrando no IE deve ser por causa do seu css que não está certo… mas se quiser entrar em contato comigo mande a sua dúvida para o meu email de contato: chrdesigner@chrdesigner.com
outubro 26th, 2009 on 11:14
CHR aco que sera ultil para você..
caso não queira ter que refazer o codigo css todo.
basta acidionar no codigo o meta name seguinte ( Ps: vc pode escolher kal emulador gostaria) achei bem interessante e resolvi postar aqui, acho que será ultil para quem apenas tem de atualizar seu site para o ie8:
Sintaxe:
Caso queira fazer com que o ie8 reconheça um codigo baseado em ie7 bastas alterar o numero 8 no codigo por 7, server tambem para servidores primitivos que utilizam programação em ie6.
Espero ter ajudado !
abraço ! Wagner Soler
wag_soler@hotmail.com
outubro 26th, 2009 on 11:15
CHR acho que sera ultil para você..
caso não queira ter que refazer o codigo css todo.
basta acidionar no codigo o meta name seguinte ( Ps: vc pode escolher kal emulador gostaria) achei bem interessante e resolvi postar aqui, acho que será ultil para quem apenas tem de atualizar seu site para o ie8:
Sintaxe:
Caso queira fazer com que o ie8 reconheça um codigo baseado em ie7 bastas alterar o numero 8 no codigo por 7, server tambem para servidores primitivos que utilizam programação em ie6.
Espero ter ajudado !
abraço ! Wagner Soler
outubro 26th, 2009 on 11:16
Sintaxe:
outubro 26th, 2009 on 11:17
meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″