Objetivo:
Explicarei a definição de um Comentário Condicional, seu funcionamento, a
implementação. Com apresentação de um exemplo prático ao final, para
melhor compreensão de todos.
Nível de dificuldade:
Básico
Introdução:
Desde o lançamento do IE7, vem sendo aconselhado aos desenvolvedores utilizarem
Comentários Condicionais, ao invés dos velhos e bons "quebra galhos" hacks para IE. Pois bem, irei descrever e detalhar o uso dessa técnica.
O que é um Comentário Condicional?
Comentários Condicionais ou Conditional Comments (CC) são comentários
que inseridos no código (X)HTML serão reconhecidos apenas pelo IE
rodando em ambientes Windows, passando assim instruções para o
navegador. Enquanto os outros browsers interpretaram apenas como
comentário normal.
Por que apenas o Internet Explorer interpreta os CC?
Pois trata-se de um código proprietário da Microsoft, permitindo por
exemplo a escolha da versão do browser Internet Explorer que necessita
de ajustes.
Os comentários condicionais são hacks CSS?
Os comentários condicionais não fazem uso de um bug do navegador para
corrigir outro bug, como são os casos dos hacks css. Porém os CC tem a
finalidade de fornecer informações especiais a um determinado navegador,
assim como os hacks. Então essa é uma pergunta que fica a depender do
ponto de vista de cada desenvolvedor.
Funcionamento:
Normalmente para tratar problemas de CSS com as versões do IE a solução
mais comum sempre foi o uso dos hacks. Porém com o Comentários
Condicionais, ao invés de tratar as diferenças dentro de uma unica folha
de estilo, é feito o tratamento em folhas de estilos separadas. Depois
basta declarar esta outra folha de estilo abaixo da sua folha de estilo
principal.
Tipos de Comentários Condicionais:
- <!--[if IE]><![endif]--> Se a versão do navegador for IE.
- <!--[if gt IE 5]><![endif]--> Se a versão do navegador for superior ao IE5.
- <!--[if gte IE 5]><![endif]--> Se a versão do navegador for igual ao IE5 ou superior.
- <!--[if lt IE 5.5]><![endif]--> Se a versão do navegador for inferior ao IE5.5.
- <!--[if lte IE 6]><![endif]--> Se a versão do navegador for igual ou inferior ao IE6.
Glosário:
- gt - maior que o browser setado (greater than)
- gte - maior ou igual ao browser setado (greater than or equal to)
- It - menor que o browser setado (less than)
- Ite - menor ou igual ao browser setado (less than or equal to)
Implementação:
Basta inserir o comentário antes da tag
</head> e logo abaixo da declaração da folha de estilo principal, quando houver.
Exemplo:
index.html
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Exemplo Comentário Condicional</title>
<link rel="stylesheet" media="all" href="style.css" type="text/css">
<!--[if lte IE 6]>
<link href="styleIE6.css" type="text/css" rel="stylesheet" />
<![endif]-->
</head>
<body>
<h1>Devido ao uso do comentário condicional o texto abaixo será azul
se o seu IE for o 7 e vermelho se for uma versão anterior</h1>
<p>Comentário Condicional</p>
</body>
</html>
style.css
p {color:#0000FF; font-size:18px;}
styleIE6.css
p {color:#FF0000; }
Observem que não foi necessário repetir a propriedade
font-size
na folha de estilo styleIE6.css, pois essa propriedade já esta
declarada na folha de estilo principal. Então o comentário apenas é
válido para a propriedade que se quer obter o resultado diferente, as
demais propriedades são válidas na folha de estilo principal não havendo
a necessidade de repeti-las.
É sempre importante usar o minimo possivel de Comentários Condicionais
ou até mesmo hacks. Sempre antes de usar busque uma saída usando apenas o
CSS. Lembre-se sempre que erros são normais, saber a melhor solução
para esses erros faz a diferença.
Espero que o contéudo exposto acima seja proveitoso para todos.
 |
| baixe os arquivos |
