(1 votes, average: 5,00 out of 5)
Loading ...
Qual web designer nunca teve que trabalhar horas a mais em um arquivo CSS por causa de problemas de incompatibilidade com o nosso queridÃssimo Internet Explorer? Então com certeza, você sabe o que é ou pelo menos já ouviu falar em Conditional Comments, certo? Se não sabe, acesse este artigo e aprenda a utilizar esta ferramenta para contornar os problemas do IE.
Tudo começa pelo fato que cada versão do Internet Explorer (IE), interpreta o CSS de uma determinada maneira, o que pode ocasionar do design que está funcionando em browsers como Firefox, Opera e Safari por exemplo, ser exibido de uma forma totalmente errada no IE. Os Conditional Comments, são comandos, ou melhor, são TAGs reconhecidas apenas pelo IE. Estes comandos são utilizados para dar instruções espefÃcas apenas para o IE. Os Conditional Comments são suportados a partir da versão 5 e basicamente são empregados para definir um CSS especÃfico para cada versão do IE que o web designer desejar. A estrutura básica de um Conditional Comment é a seguinte:
<!--[if IE 6]>
Intruções que serão interpretadas apenas pelo Internet Explorer 6
<![endif]-->
Algumas informações importantes sobre os Conditional Comments:
1 – Sua estrutura é muito parecida com os comentários utilizados em códigos HTML (<!– –>). Todos os outrso browsers vão interpretar este comando como um comentário comum, ignorando-o.
2 – Os Conditional Comments utilizam a estrutura de TAGs do padrão HTML, sendo assim, só podem ser utilizadas em arquivos HTML (php. asp,cfmaspx,etc.) e não direto no CSS. Exemplificando. Você pode utilizar este recurso como o código abaixo:
<!--if[IE 6]>
<!-- Se o browser for Internet Explorer 6-->
<link id="css1" href="css/ie6.css" type="text/css" rel="stylesheet">
<![endif]-->
<!--if[IE 7]>
<!-- Se o browser for Internet Explorer 7-->
<link id="css1" href="css/ie7.css" type="text/css" rel="stylesheet">
<![endif]-->
Mas não poderá utilizá-lo dentro de um arquivo CSS, como mostra o exemplo abaixo:
Arquivo de exemplo main.css:
span {padding:10px 5px 10px 5px; margin:0;}
<!--if[IE 7]>
span {padding:0; margin:0;}
<![endif]-->
3 - Como o Internet Explorer permite apenas uma versão do software instalado no computador, muitos recorrem a um programa chamado Multipe IE, que permite a instalação de todas as versões do Internet Explorer na mesma máquin. Caso você utilize este programa, vale saber que os Conditional Comments serão interpretados apenas para a última versão de IE instalado na máquina, ou seja, você não conseguirá testar as diferenças de cada versão neste computador.Abaixo segue uma lista bem completa de algumas possibilidades envolvendo Conditional Commets:
<!--[if IE]>
Instruções apenas para o Internet Explorer
<![endif]-->
<!--[if IE 5]>
Instruções apenas para o Internet Explorer 5
<![endif]-->
<!--[if IE 5.0]>
Instruções apenas para o Internet Explorer 5.0
<![endif]-->
<!--[if IE 5.5]>
Instruções apenas para o Internet Explorer 5.5
<![endif]-->
<!--[if IE 6]>
Instruções apenas para o Internet Explorer 6
<![endif]-->
<!--[if IE 7]>
Instruções apenas para o Internet Explorer 7
<![endif]-->
<!--[if gte IE 5]>
Instruções apenas para o Internet Explorer 5 ou superior
<![endif]-->
<!--[if lt IE 6]>
Instruções apenas para versões inferiores ao Internet Explorer 6
<![endif]-->
<!--[if lte IE 5.5]>
Instruções apenas para o Internet Explorer 5.5 ou versões anteriores
<![endif]-->
<!--[if gt IE 6]>
Instruções apenas para versões superiores ao Internet Explorer 6
<![endif]-->
Falando sobre os operadores utilizados no código
gt = greater than – superior a
gte = greater or equal – superior ou igual a
lt – less than – inferior a
lte – less than or equal – inferior ou igual a
Este tutorial foi baseado nas informações contidas no Blog: http://www.quirksmode.org
Sobre o autor
Tiago Pimentel
Estudei design gráfico na EPA e por uma ironia do destino, me tornei diretor de arte digital. Também sou ilustrador e músico, trabalho na Jazz Digital e sou adicto a links interessantes e todas as coisas boas da vida: fotografia, moda, cinema, viagens, arte, cultura, internet. Além disso dedico meu tempo livre às artes plásticas. Entre em contatos através das redes sociais, Facebook, Twitter, etc. Os links estão no MeAdiciona: www.meadiciona.com.br/tiagopimentel
Você também deve curtir:
 |
 |
 |
 |
6 Respostaspara ““Tutorial CSS: Internet Explorer Conditional Comments”
Deixe uma resposta
parceiros
Poxa ( pra nao falar outra coisa ), os caras colocam informações erradas na internet, e agente é obrigado a pagar o pato.
Eu ja tinha esse código ai, mas nunca tinha usado, agora que fui usar descobri que estava errado. Ai usei o seu e funcionou que eh uma maravilha.
O que eu usava era
era com 2 “–” e nao com 1 só.. que é o correto
Primeiramente obrigado pelo comentário.
Putz, também sou vitima de tutoriais que não funcionam, principalmente os de código. É engraçado por que no final do tutorial, o cara coloca: “Clique aqui para ver a versão final funcionando”. Quando você clica, funciona de verdade, mas o código que tem na página, não funciona nem a pau….rs
As vezes é por que, como eu as pessoas escrevem na pressa… errar é humano né? rs
[ ]s
hello it is test. WinRAR provides the full RAR and ZIP file support, can decompress CAB, GZIP, ACE and other archive formats.
ndnxhrrgawntbammuorgzdovakznktpbujyhello
nao sei se esse é o problema dos outros, mas eu consegui fazer funcionar, salvando em php. ateh
Opa Daniel, fico feliz que o código tenha funcionado. [ ]s