pular para o conteúdo [1]

Artigos sobre Front-End e Programação web

Comentários condicionais para o Internet Explorer

| 0 Comentários

Os Comentários condicionais (Conditional Comments) só funcionam para navegadores Internet Explorer, é uma implementação proprietária da Microsoft e serve para as versões 5 e superiores. Utilizamos comentários condicionais para servir uma regra CSS diferente para os navegadores da Microsoft. Só os navegadores da Microsoft leram esses códigos. Podemos ainda escrever uma regra CSS para uma determinada versão do Internet Explorer.
Os comentários condicionais funcionam da seguinte forma:

<!--[if IE 6]>
#principal{width:500px;}
<![endif]-->


Sua estrutura básica é a mesma a de um comentário em HTML.
Todos os outros navegadores vão interpretar como um comentários e não vão executar o que estiver entre <!--[if IE 6]> e <![endif]-->.
O comentário condicional acima diz o seguinte: Se o navegador for o Internet Explorer 6 a div com o nome de principal vai ter a largura de 500px.
Inserimos os comentários condicionais dentro de arquivos HTML, mas precisamente entre As tags <head></head>. Não tem como inseri-los dentro de arquivos CSS.
Em meus trabalhos sempre prefiro usar os comentários condicionais a usar os hacks. Acho mais fácil de dar manutenção na apresentação do site trabalhando dessa forma.
Como dito no inicio do post podemos criar comentários condicionais para um determinado navegador da Microsoft, para isso utilizaremos os termos de comparação:

Sinal Descrição
lt Significa menor do que
lte Significa menor do que ou igual
gt Significa maior do que
gte Significa maior do que ou igual
! Significa condição negada

Veja alguns exemplos:

<!--[if IE]>
De acordo com o comentário condicional este é o Internet Explorer <br /> 
<![endif]-->
<!--[if IE 5]>
De acordo com o comentário condicional este é o Internet Explorer 5 <br />
<![endif]-->
<!--[if IE 5.0]>
De acordo com o comentário condicional este é o Internet Explorer 5.0 <br /> 
<![endif]-->
<!--[if IE 5.5]>
 De acordo com o comentário condicional este é o Internet Explorer 5.5 <br /> 
<![endif]-->
<!--[if IE 6]>
De acordo com o comentário condicional este é o Internet Explorer 6 <br /> 
<![endif]-->
<!--[if IE 7]>
De acordo com o comentário condicional este é o Internet Explorer 7 <br /> 
<![endif]-->
<!--[if gte IE 5]>
De acordo com o comentário condicional este é o Internet Explorer 5 e até <br /> 
<![endif]-->
<!--[if lt IE 6]>
De acordo com o comentário condicional este é o Internet Explorer inferior a 6 <br /> 
<![endif]-->
<!--[if lte IE 5.5]>
De acordo com o comentário condicional este é o Internet Explorer inferior ou igual a 5,5 <br />
<![endif]-->
<!--[if gt IE 6]>
De acordo com o comentário condicional este é o Internet Explorer superior a 6 <br />
<![endif]-->

Você também pode por o link de uma folha de estilo:
Exemplo:

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="estilos_ie6">
<![endif]-->

E aqui termina mais um post 😉
Abraços

Categorias: CSS | Tags: |

Deixe uma resposta

Campos obrigatórios *.



*

Topo