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>

2 comentários em “CSS: Conditional Comment x CSS hacks

  • 13 de maio de 2011 em 21:55
    Permalink

    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.

    Resposta
    • 14 de maio de 2011 em 9:29
      Permalink

      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.

      Resposta

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *