Usando Comentários Condicionais (hack)

O comentário condicional é uma técnica hack ([…]Filtro CSS ou hack é um codificação técnica utilizada para ocultar ou mostrar CSS marcação dependendo do browser, Número de versão ou capacidades[…] Wikipedia) que permite definir as folhas de estilo (CSS – Cascading Style Sheets) especificamente para o navegador Internet Explorer (à partir da versão 5 ou posterior), inclusive é possível distinguir entre as versões 5.0, 5.5, 6.0 e 7.0.
Nota:
 Os demais navegadores desconsideram o comentário condicional simplesmente por ser um comentário html 😉
 Existem outras formas de identificar a versão do browser via java-script, porém este não é o foco deste artigo. Mais detalhes em http://www.w3schools.com/js/js_browser.asp
 Os hacks exploram bug no IE, o que faz uma instrução ser interpretada pelo IE e desconsiderada por outros navegadores. Como se usa de bug, não há garantias que os hacks funcionem em versões futuras do IE.

A sintaxe básica de cada tipo de comentário é mostrado no quadro abaixo:

Tipo de comentário Sintaxe de uso
Comentário padrão da HTML
<!-- Comment content  -->
downlevel-hidden
<!--[if expression]> HTML <![endif]-->
downlevel-revealed
 HTML 

A seguir os operadores suportados nas expressões condicionais:

Item Exemplo Significado
!
[if !IE]
O operador NOT é usado para inverter o sentido da
expressão booleana.
lt
[iflt
IE 5.5]
A menos que o operador. Retorna true
se o primeiro argumento é menor que o segundo argumento.
lte
[if lte
IE 6]
A menos do que igual ou operador. Retorna true se o primeiro argumento é menor ou igual ao segundo
argumento.
gt
[if gt
IE 5]
A maior que o operador. Retorna true
se o primeiro argumento é maior do que o segundo argumento.
gte
[if gte
IE 7]
O maior que igual ou operador. Retorna true se o primeiro argumento for maior ou igual ao
segundo argumento.
( )
[if !(IE 7)]
Operadores subexpressão
&
[if
(gt IE 5)&amp;(lt IE 7)]
O operador AND. Retorna true

se todas as subexpressões avaliar a verdade

|
[if (IE 6)|(IE
7)]
O operador OR. Retorna true

se algum dos subexpressões avaliada como
verdadeira.

Segue alguns exemplos de uso:

Qualquer versão do IE: (Errata)

	<!--[if IE]>
			<link rel="stylesheet" type="text/css" href="ie-only.css" />
<![endif]-->

Se NÃO for IE:

	<!--[if !IE]>
			<link rel="stylesheet" type="text/css" href="not-ie.css" />
	<![endif]-->

Só IE versão 7:


	<!--[if IE 7]>
			<link href="IE-7-SPECIFIC.css" rel="stylesheet" type="text/css">
	<![endif]-->

Só IE que não seja a versão 7:


	<!--[ if! (IE 7)]>
 Você não está usando a versão 7. </ p> <![endif]-->

Só IE versão 6:


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

Só IE versão 5:


	<!--[if IE 5]>
			<link rel="stylesheet" type="text/css" href="IE-5-SPECIFIC.css" />
	<![endif]-->

Só IE versão 5.5:


	<!--[if IE 5.5000]>
		<link rel="stylesheet" type="text/css" href="IE-55-SPECIFIC.css" />
	<![endif]-->

Versão do IE versão 6 ou INFERIOR


	<!--[if lt IE 7]>
			<link rel="stylesheet" type="text/css" href="IE-6-OR-LOWER-SPECIFIC.css" />
	<![endif]-->

IE maior ou igual(gte) a versão 7:


	<!--[ if gte IE 7]>

 Você está usando o IE 7 ou superior. </ p>
	<![endif]-->

IE maior ou igual(gte) a versão 5.5 e (AND) menor que(lt) a versão 7


	<!--[ if (IE gte 5,5) & (lt IE 7)]>
 Você está usando o IE 5.5 ou IE 6. </ p> <![endif]-->

IE menor(lt) a versão 5.5:


	<!--[ if lt IE 5.5]>
 favor atualizar sua versão do Internet Explorer. </ p> <![endif]-->

Referências:
Tricks – How To Create an IE-Only Stylesheet (28/12/2009) <http://css-tricks.com/how-to-create-an-ie-only-stylesheet/>
Maujor – Comentários condicionais (28/12/2009) < http://www.maujor.com/tutorial/condcom.php>
Microsoft – About Conditional Comments (28/12/2009) <http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx>
Wikipedia – CSS filter (28/12/2009) <http://en.wikipedia.org/wiki/CSS_filter>

4 Comentários

Arquivado em CSS, HTML

4 Respostas para “Usando Comentários Condicionais (hack)

  1. See Liiga seeus hackes Algueen aii saabe Algum hack de mu ? qualqueeer Uum hack eu acc Ooks ?

  2. Leonardo Antonioli

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s