Prepare o seu site para o Internet Explorer 7
27 de julho de 2006, 18:54Para os desenvolvedores: todos os hacks de CSS utilizados para contornar os bugs do Internet Explorer vão deixar os sites quebrados no IE 7 que vem por aí. Mas já existe a solução, através de conditional comments. Entenda.
Por
A cada nova versão "beta" do Internet Explorer 7 que fica disponível por aí para download, mais se aproxima seu lançamento oficial. Mas existe um "segredo" que a maioria dos desenvolvedores não sabe, que é que todos os hacks de CSS que costumávamos utilizar no passado para contornar os bugs do Internet Explorer, serão como uma bomba que vai deixar os sites no novo browser azul “quebrados”. Mas para isso já existe a cura antecipadamente.
A utilização de comentários condicionais é uma excelente maneira de contornar bugs e declarar regras de CSS para o Internet Explorer sem necessariamente utilizar hacks. Comentários condicionais trata-se de uma sintaxe especial para escrever comentários em documentos de (X)HTML que são interpretados somente pelo Internet Explorer.
Como o nome sugere, esses comentários condicionais permitem com que você aponte uma condição necessária, escolhendo por exemplo a versão de um browser, e poder fornecer uma solução específica para uma ou mais versões ao mesmo tempo do Internet Explorer.
Apesar de não serem um padrão propriamente dito (é um código proprietário da Microsoft), estes comentários ficam visíveis para todos os outros browsers mas são interpretados simplesmente como comentários comuns, onde o seu conteúdo não é parseado, ou seja, só o IE “interpreta” o conteúdo inserido dentro destes comentários.
Geralmente os bugs mais comuns de CSS (pelo menos aqueles com os quais devemos nos preocupar por enquanto) são compartilhados pelas três últimas versões do Internet Explorer, ou seja, as versões 5, 5.5 e 6. Como os comentários condicionais surgiram no Internet Explorer 5, a forma de declarar para fornecer estilos específicos pra estas três versões ao mesmo tempo seria assim:
<!--[if lte IE 6]>
<link href="http://www.seusite.com.br/estilos_ie.css"
rel="stylesheet" type="text/css" />
<![endif]-->
Lembre-se apenas de declarar o conditional comment chamando sua folha de estilos específica para o IE abaixo da sua folha de estilos principal. Isso é necessário para que as declarações contidas na folha para o Internet Explorer não seja sobreposta pela declarações padrão para todos os outros browsers decentes. Assim você assegura que o IE irá renderizar as regras específicas para ele no lugar das regras para os outros browsers.
As vantagens de utilizar conditional comments como uma forma de servir estilos específicos para o IE é que fazendo assim, você concentra as excessões todas em um só lugar, e sua folha de estilos principal fica limpa e sem hacks, você consegue ficar livre de erros de sintaxe facilmente, e o dia em que quiser parar de ser compatível com estas versões do Internet Explorer (daqui uns 5 anos talvez?) basta excluir a folha de estilos e o conditional comments e manter sua folha de estilos intacta.
Por que você está falando disso agora?
A medida que o tempo passa antes do lançamento oficial do Internet Explorer 7 as recomendações para que os sites feitos antes dessa nova versão não fiquem “quebrados”, começam a ser mais concretas. Então em um momento ou outro você vai ter que prestar atenção nisso de qualquer maneira. Ao menos que queira deixar seu site “quebrado” para o IE7.
O call to action da Microsoft avisa que as seguintes soluções (hacks) não deverão estar presentes nos sites quando o IE7 estiver na ativa. Caso contrário seu site não será renderizado corretamente:
html > body
* html
head:first-child + body
head + body
body > element
O conselho da Microsoft para resolver este problema é utilizar conditional comments como demonstrei acima. Lá no IEblog, eles colocaram um exemplo para colocar estas regras e declarações no próprio documento dentro de um conditional comment, o que eu não recomendo. Ao menos que não estejamos falando de um site com apenas uma única página e não duas ou mais, será muito mais produtivo que você coloque todas suas regras e declarações dentro de uma folha de estilos externa específica para o IE e a importe de dentro de um conditional comment como eu exemplifiquei acima.
Você então deve retirar todas as soluções pouco elegantes da sua folha de estilos, retirar tudo aquilo que for um by-pass para o IE, transformá-las em regras e declarações normais e colá-las dentro de uma folha de estilos separada e chamá-la nos seus documentos através de conditional comments. Acredite ou não, esta é a solução mais elegante e recomendada que existe.
Confira se o seu site já está preparado para o novo Internet Explorer 7 antes de seu lançamento oficial. É uma boa medida; assim você pode se antecipar e evitar problemas. [Webinsider]
1° Rafael Fischmann Data: 27/07/2006 às 8:58 pm
Atividade: Diretor de Arte
Cidade: Salvador
Que maravilha, né. Nova versão vindo aí e a Microsoft, em vez de resolver de uma vez por todas os problemas do seu browser e torná-lo 100% compatível com os padrões da W3C, prefere alertar todos os desenvolvedores de sites para que atualizem seus hacks para o Internet Explorer. É o mesmo que dizer: “Bom, temos o navegador mais usado do mundo, é isso mesmo, f*****-se vocês.” Go, Firefox!