Voltar para o site

Escondendo CSS de versões antigas do IE

Publicado em: 07/12/2006

Autor: Petr 'Pixy' Stanicek
URL do original: https://www.wellstyled.com/html-hide-older-ie.html
Título original: HTML: CSS Cutoff Older IE
Traduzido com autorização expressa do autor

Versões mais antigas do IE tendem a tornar-se obsoletas e há ocasiões em que é conveniente esconder o código para tais versões. Ocasiões em que em lugar de xingar uma versão mais antiga do IE é mais elegante evitar que nosso CSS seja a ela servido a fim de que os 'bugs' próprios da versão não 'quebre' e torne inintelegível nosso documento. Sem CSS o HTML será renderizado de em uma forma clara e livre estilizações naquela versão.

Existem muitos 'hacks' e maneiras de escrever código para servir as diferentes versões do IE. Teoricamente nós podemos usar qualquer um deles para esconder CSS. Contudo nem todos eles são apropriados ou convenientes ou simples de empregar. O código proprietário da Microsof denominado Comentários Condicionais para o IE tem se mostrado ser a solução mais "limpa" e confiável. Para todos os demais navegadores os Comentários Condicionais são ignorados e somente o IE é capaz de processá-los convenientemente.

<!--[if IE]>
   ... código para o IE...
<![endif]-->

Podemos ainda especificar as versões do IE ou usar os operados "maior que" ou "menor que" (gt/gte/lt/lte) nas condicionais — ver a sintaxe para detalhes. A "negação" da condição é mais conveniente para esconder CSS, contudo existe um problema com o seu uso.
A condição negada não usa a marcação HTML para comentários (<!-- -->) e assim uma tag proprietária não constante das especificações para HTML será inserida no código, tornando o documento inválido.

<![if !IE]>
   ... código ignorado pelo IE...
<![endif]>

Este problema pode ser facilmente resolvido, bastando para isto usar a marcação HTML para comentários. A brilhante solução foi mostrada por David Grudl:

<!--[if !IE]> -->
   ... código ignorado pelo IE...
<!-- <[endif]-->

Contudo, se usarmos uma condicional para várias versões do IE como mostrado acima, um outro problema ocorrerá. Os IE que satisfizerem a condição, renderizarão na primeira linha visível da página, a sequência --> (mesmo que a condicional tenha sido escrita na seção <head> do documento). Se você estiver usando a versão IE 5 ou superior, você verá a sequência --> renderizada no exemplo a seguir:

<!--[if !lt IE 5]> -->
   ... código ignorado pelos IE anteriores ao 5 ...
<!-- <[endif]-->
... código ignorado pelos IE anteriores ao 5 ...

Felizmente, nos comentários ao artigo escrito por David David Grudl Jan Renner apontou uma alternativa para solucionar este problema. Se a sequência --> for substituida pela sequência <!-->, outros navegadores que não IE tratarão o código como um comentário HTML, ignorando-o. Eles verão o final do código como o fechamento de um comentário. Por outro lado os IE tratarão o final do código como um comentário curto, ignorando-o também.

Com estas ferramentas, podemos agora inserir código dentro da página para ser interpretado por toddos os navegadores exceto para versão(ões) específica(s) do IE. Regras CSS, importação de arquivos externos ou qualquer outra coisa pode ser condicionalmente inserida na página. No exemplo a seguir a estilização será ignorada por todas as versões do IE anteriores ao IE6 (O IE 6 honrará os estilos).

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

<!--[if !lt IE 6]><!-->
    <style type="text/css">
       @import "style2.css";
    </style>
<!--<![endif]-->

<!--[if !lt IE 6]><!-->
   <style type="text/css">
      body { margin:0; background:#f0f0f0; color:#333 }
      ...
   </style>
<!--<![endif]-->

Podemos facilmente esconder CSS para IE 5.x (e anteriores) usando esta técnica. Naquelas versões a página será renderizada em HTML puro e sem estilizações. Se você tem acesso a estas versões do IE poderá verificar na prática visualizando esta página exemplo. É claro que se for conveniente você poderá servir uma folha de estilos alternativa para as versões mais antigas que você excluiu, usando outro comentário condicional.

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.

topo