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.
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.
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 |
Nenhum comentário:
Postar um comentário
"Ajude com nossas INFOrmações. Retribua com bons comentarios."