CSS: Conditional Comment x CSS hacks
Conditional Comment: Uma boa prática para resolver problemas de incompatibilidade (bugs) no Internet Explorer.
Especialistas no assunto indicam a utilização de “conditional comment” ao invés de CSS Hacks.
O que são Conditional Comments?
É um comentário HTML normal com instruções especiais, interpretado somente pelo Internet Explorer; os demais navegadores ignoram essas instruções.
Sintaxe:
<!--[if IE 6]> Instruções especiais <![endif]--> |
Vantagens:
– não utilização de hacks
– permite colocar as instruções em um arquivo separado específico
– fácil de dar manutenção
– css válido
Mais exemplos:
<!--[if IE]> suportado por todas as versões do IE <![endif]--> <!--[if IE 5]> suportado para versão 5 <![endif]--> <!--[if lt IE 5]> suportado para versões menores que 5 <![endif]--> <!--[if lte IE 5]> suportado para versões menores ou iguais a 5 <![endif]--> <!--[if gt IE 5]> suportado para versões maiores que 5 <![endif]--> <!--[if gte IE 5]> suportado para versões maiores ou iguais a 5 <![endif]--> |
Aplicando em um arquivo separado:
Detalhe: O “conditional comment” deve ser escrito, sempre, após os links para os arquivos CSS.
<html> <head> <link rel="stylesheet" href="style.css" type="text/css" media="all" /> <!--[if IE 5]> <link rel="stylesheet" href="style-ie5.css" type="text/css" media="screen" /> <![endif]--> </head> <body> <!-- conteudo do site --> </body> </html> |
Cara, nesse caso eu teria 2 ou mais css correto, tipo: style_1 para IE e style_2 para chrome etc…
e esse css hacks no caso so seria para o IE, correto ?
Valeuuu.
Correto! vc cria um arquivo .css para cada navegador. Porém, não há necessidade de repetir todos os atributos e sim, colocar apenas o que difere de um navegador para outro.
Não! os CSS Hacks existem para todos os navegadores.
Abraços.