Usando comentários condicionais em HTML

StackOverflow https://stackoverflow.com/questions/414738

  •  03-07-2019
  •  | 
  •  

Pergunta

Eu sou relativamente novo para desenvolvimento web e aprendendo o tempo todo. Eu vim recentemente através de 'Comentários condicional' ao visualizar o código-fonte para diferentes sites. Eu acho que agora eu entendo o que eles fazem, mas tenho certeza de quando usá-los.

Eu vi-os principalmente utilizado para a implementação de diferentes folhas de estilo quando se trata de IE e gostaria de saber se isso é uma boa prática?

Nesse caso, se a resposta for 'sim'. Então, quando desenvolvimento de um site é 'lugar comum' de usar duas folhas de estilo separadas para fixar bugs, por exemplo, criar uma folha de estilo para IE e outra para Firefox, Opera etc?

Agradecemos antecipadamente.

Foi útil?

Solução

Os comentários condicionais só são suportados pelo IE, tanto quanto eu sei, e eles graciosamente degradar em navegadores que não suportam-los (uma vez que eles se parecem com um comentário normal). O consenso geral é que é OK para usar um recurso do navegador não-padrão se você estiver usando-o para combater outro navegador não-padrão "recurso" (ou seja, o apoio de baixa qualidade para CSS no IE). Então você vai achar que é uma solução muito comum para CSS ajustes.

Outras dicas

A natureza do Internet Explorer (versão 6 especialmente ) faz com que algumas folhas de estilo funcionam bem com o IE, e alguns não. Para efeitos do que aqueles que não, você pode usar comentários condicionais para ter o código CSS que só aparece para o IE. Eu tenho que usá-lo por causa de como o Internet Explorer (MIS) alças CSS menus suspensos.

Para tornar o site que eu estou trabalhando em processar corretamente o recurso hover do menu suspenso, eu tenho que implementar o arquivo crosshover.htc. Aqui está o código que eu tenho que usar: 

     <!--[if IE]>
<style type="text/css" media="screen">
#menu ul li {float: left; width: 100%;}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {
behavior: url(http://www.stannscatholicschool.com/csshover.htc);
font-size: 100%;
}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}

#menu a, #menu h2 {
font: 100% verdana, tahoma, helvetica, arial, sans-serif;
}

</style>
<![endif]-->

Se eu não fizer isso, o menu suspenso se divide e não pode ser navegado no Internet Explorer 6.

Eu usei comentários condicionais para detectar se os visitantes do meu site usa IE6 ou inferior. Se for esse o caso, eu carregar o IE7.js roteiro, que supera algumas dos erros nestes navegadores mais antigos. Há também um script para emular apoio IE8.

Algumas pessoas também usam comentários para ajudar esboço certas áreas da página como um rodapé, cabeçalho ou o conteúdo principal (muitas vezes em modelos).

No entanto, se você estiver usando divs e CSS (que parece que você está), você deve ser capaz de dizer qual é o conteúdo ou que área do HTML você está em pelos ids DIV e estilos CSS. Lembre-se de usar nomes claros e não tentar abreviar-los apenas por uma questão de facilitar a digitação.

Se isso é um problema para você, então Intellisense é uma coisa maravilhosa e pode nos ajudar a chegar ao redor coisas assim. Se não, então CTRL + C e CTRL + V é provavelmente a próxima melhor coisa:)

Não afiliado a StackOverflow
scroll top