CSS: Conditional Comment x CSS hacks

    Obrigado! você é a 925ª pessoa que visita este post.

    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>

    Related posts:

    1. CSS: Bug do Float/Display: Table do Firefox
    2. CSS: Problemas de espaços entre itens de lista