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]
Henrique Costa Pereira
Henrique C. Pereira é UX/UI na Zup, ficou zen, sumiu da internet e fotografa a vida passando nas horas vagas.
33 respostas
O tempo passou e a microsoft nada de ajudar com um navegar mais seguro, estável e sem tantas complicações.
Parabéns pelo seu trabalho.
Estou com um problema neste site: http://www.abovenet.com.br. ele nao abre diversas coisas no IE7, como os submenus etc. Não sou programador e gostaria de saber se existe uma solução simplificada para esse problema. ja pesquisei emdiversos lugares e esse artigo foi o que eu encontrei de melhor. Muito obrigado desde já.
Cara, para que usar IEca 7 ?
O trem já é uma m!@#$#$da !
O melhor é seguir o padrão da W3C e usar o FireFox e tantos outros livres que seguem o padrão da W3C ! Não a incentivar o IEca ! O próprio apelido já fala, tudo IECA 7 !
Hahuauhhua ! Enquanto o FireFox esta crescendo já é um dos mais usados no mundo em apenas na sua versão 2, hahahah o IECA agora que veio com inovações depois de uma serie de bugs !
Ow dica: Viva a liberdade ! Use Linux !
ola caros brasileiros
vcs estam falando de uma coisa ke e feita por varios Software de programacao
o IE 7 para windows e feito em VB.net
O IE 7 feito para mac os e feito com C e C++
todos eles tem codigos diferents e binarios diferents
vcs nao kerem meter uma igreija dentro de uma sacristia pois nao
obrigado
kem somos nos verdade
nos podemos lutar contra a microsoft
por mais de 20 anos hackers tem lutado contra a microsoft e iram ser fazelo
todos os windows ke uso e todo o software ke estou usando de microsoft company eles estam todos crackeados
o novo windows vista vai ser lancado no proximo ano a microsoft informou ke o kernel do windows vista tem um patch ke proteje os malicios patch
o windows vista 5600 ja esta crackeado e nao expira na europe kase todos a compnhias estam usando o windows vista crackeado
hahahha microsoft e so nome e fama
obrigado
Preparar o site para IE7. O correto não seria a Microsoft preparar o seu navegador? Testando versões desde o Beta 2, vários sites com javascript apresentam problemas. O problema não pode ficar para o usuário comum. A microsoft que se vire. É inadimissível a hipótese contrária.
1 abraço,
Marcos Aurélio Pawlowski
Bill Gates quer criar um padrão só dele. Por isso ele ignora o mundo e não adota os padrões da W3C. E a bomba explode na nossa mão, na mão dos desenvolvedores. Queria ver se o dono da Microlixo tendo que passar horas para mudar códigos do seu site… 🙁
O mundo não gira em torno da Lixosoft
é por issu que o uso do Firefox vem aumentando
Pra que que exite o W3C, de enfeite??
Não dá para lutar contra a Microsoft ainda. Infelizmente temos que produzir atendendo à demanda. Mas acho que em algum tempo os clientes conseguirão entender as razões de se usar os padrões Web e aí sim eles prevalecerão.
Por enquanto, devemos ter trabalheira mesmo e colocar infinitas condicionais em nossos sites para contemplar gregos e troianos.
Grande abraço
É incrível como certas ações vem para dificultar a vida dos profissionais, está aí um exemplo do novo IE 7; mas quem somos nós para lutar contra a MS, pouco podemos fazer contra a exorbitante liderança dos IEs, pelo menos por enquanto. E que no futuro, bem próximo, este mercado seja liderado pelo Opera e/ou Firefox, que ainda tem muito para se adaptar/melhorar.
Acessem http://www.ie7.com e baixem agora mesmo o melhor browser que já existiu !!!
E desde quando o Firefox interpreta todas as Web Standards corretamente???
Fique sabendo que o Opera é o browser que melhor interpreta os padrões. Ele só não caiu nas graças do povo ainda. Ainda!
Saudações,
Mark Costa
Eu ainda duvido que o IEca vá interpretar tudo dentro dos padrões como o FF
Olá,
Vocês podem utilizar o CSS Browser Selector para isso!
http://rafael.adm.br/css_browser_selector
Abraços
É impressionante como a MS só dificulta a nossa vida! Que p$#%$#% ao invés de seguir uma linha do W3C. Paciência fazer o que.
No caso destes problemas encontrados, creio que pedem um pouco mais de pesquisa, pois o Firefox, sim é verdade, tem que instalar alguns plugins
como java da sun http://www.java.com , flash http://www.adobe.com/br e o realplayer. Mas tirando isso e dando uma fuçada em menu Ferramentas Opções verá que dá para deixar liberado javascritp. Enfim, fazendo isso o navegador não tera´mais os problemas mencionados. Agora, é claro, é mais facil um usuário leigo simplesmente usar o IE que não tem proteção (só tem no XP e não é lá grande coisa), mais também este inconveniente de instalar um programa. Afinal o IE já vem instalado e é aí que a Microsoft domina o mercado.
Depois de ler os comentários acima fiquei em dúvida com uma coisa. Pelo que percebi todos odeiam o IE e amam o Firefox, percebam que usei a palavra AMAM, que em bom português todos sabem que amor é cego.
Muito bem, sempre fui usuário do IE, mas recentemente instalei o Firefox 1.5 (acho).
Bom, percebi algumas coisas nele que é inaceitável para um browser, vamos a elas:
– Não funciona Javascript em boa parte dos sites que eu costumo visitar;
– Constantemente ao abrir uma nova janela, abre tb uma janela do Mercado livre por trás (ninguém merece isto);
– O CSS não funciona em muitos sites. Curiosamente um dia desses eu estava dando aulas e alguns alunos usavam o IE e outros o Firefox (Não sou xiita, cada um usa o que quer), mas ao criar algumas classes CSS, estas funcionavam no IE e não funcionava ou tinha um comportamento muito diferente do esperado no Firefox, e aí? Vc vai falar o que para os alunos? Vc são professores?
– Estava testando um site que estávamos desenvolvendo aqui na agência e havia um erro de Javascript nele, OK, no IE dava o erro e falava a linha e o tipo do erro e etc, no Firefox a página simplesmente travava e ficava impossível saber o que aconteceu.
– No site de outro cliente no Firefox ele pedia a instalação um plugin, Tá, vamos instalar (apesar de já estar instalado no IE), mas para a minha surpresa ele não encontrava o plugin para a instalação o que obrigou uma pesquisa a parte, localizar o plugin e fazer a instalação manual.
Bom, a lista é grande, mas vou para po aqui.
Não sou defensor de ninguém, mas por estes e outros motivos que não escrevi aqui acho o Firefox um Browse muito elegante e estou torcendo muito para ele ficar tão bom quando o IE, mas hoje é não dá para pensar em trocar.
Abs.
Artigo providencial. Parabéns.
Não espero nada do IE 7, mas acreditava que as melhorias copiadas da concorrência tirariam alguns recursos do banco de reserva, como o PNG com transparência, e diminuiriam o tempo de testes e ajustes no layout.
A Microsoft cresceu fazendo vista grossa para a pirataria, impôs seus padrões toscos e se mantém à custa da inércia dos usuários. Mas o usuário doméstico desinformado não é nada. Quem melhor para disseminar alternativas de navegadores e outros aplicativos melhores do que universidades, órgãos públicos e grandes empresas? Mas nessas estruturas impera as burocracias medíocres (ou mesmo incompetentes) dos CPDs. E por sua vez as agências seguem uma pseudo-eficiência baseada exclusivamente em prazos e adoram empurrar sites cheios de traquitandas em Flash. Ou então com código poluído e só testado no IE.
Já se comparou esse tipo de atitude com os lemingues, roedores que todo ano cometeriam suicídio coletivo, rumando deliberadamente para abismos. Pura lenda. Na verdade, muitos morrem em migrações simplesmente caóticas. Assim mesmo, talvez ainda seja uma metáfora válida.
É, isso mesmo…lte IE 6, ou então lt IE 7.
Falei besteira no outro comentário, ainda bem que você entendeu…hehe
A Microsoft está sempre querendo manter sua característica de desenvolvimento proprietário, complicando o trabalho dos desenvolvedores. Infelizmente não podemos pensar exclusivamente no FireFox ou Ópera, pois nossos clientes usam IE…
odeio o IE sempre!!!
só atrapalha a nossa vida… brincadeira…
internet explorer 7 X Sites
É, a Microsoft está indo mesmo muito bem mesmo! Incentivando a migração do sistema operacional com o WGA feito sob medida para irritar todos os usuários de XP. E em paralelo incentivando a migração do navegador com o lançamento do IE 7, perfeito para para irritar todos os desenvolvedores de site. Viva o Linux, Mac OS X, Firefox, Opera, etc.!
Lembro dos comentários revoltados no blog do IE quando eles lançaram esse call to action.
Por isso que eu recomendo Opera/Firefox pra toda alma viva que eu conheço! 😛
Inacreditável! É o famoso cobre a cabeça, descobre o pé.
Mais uma vez temos que nos adaptar ao navegador quando o correto seria a conformidade com os padrões.
Lamentável.
Cara, não dá pra entender. Nossos programadores aqui fazem os sítios redondinhos, funcionando em tudo que é browser. Daí, quando vamos testar no IE+Windows, metade das coisas não funciona. Temos que sempre sujar o código pro sítio funcionar direito.
Outro dia, tivemos que convencer um cliente de que IE+Mac OS X simplesmente não dá. Nem a Microsoft acredita mais no navegador deles para o Mac.
Agradeço a dica e vou comentar com nossos programadores sobre isso. Mas tenha a certeza de que lutaremos com unhas e dentes pra que ninguém nunca mais precise usar o IE.
Grande abraço.
[if IE], no caso, pegaria também o IE7. Se queremos excluir o IE7, deveríamos usar [if lte IE 7]. 😉
Eitxa… li a muito tempo atrás lá no blog do Henrique, o Revolução.etc sobre isso. Hoje já não utilizo os _ os outros hacks.
Tenho alguns sites que ainda estão com os hacks, mas que já estou passando para o Conditional Comments e sem comentários.
Agora que eu percebi que você é o Henrique. O Henrique lá do Revolução Etc..
Aproveito pra parabenizar. Ótimo trabalho, tanto lá quanto aqui, com a nova programação visual.
Nunca parei pra ler o código, mas tenho certeza que foi um ótimo trabalho… Afinal, o Revolução é uma das minhas fontes de informação(ou formação?! =)..
[]
Não tenho certeza de como está vindo o IEca 7, mas se estiver melhor em relação aos padrões e interpretando css 2+ o melhor que se tem a fazer é usar seletores específicos..
Assim que escrevo meus estilos, programando todo o layout pra funcionar redondo no IEca e depois arrumando o que tem de quebrado usando #id > .classe { etc:etc; }..
Bom artigo. O novo IEca pode se tornar mais uma dor de cabeça powered by Microsoft.
Abraço.
Ótimo artigo do Henrique, algo realmente útil para contornarmos as dificuldades geradas pela microsoft para nós desenvolvedores web. Acredito que esta é a forma mais viável de se burlar os principais bugs gerados pela discordâncida do real desenvolvimento dos parseadores dos brownsers da atualidade. Mais ainda não vejo um futuro a nível de desenvolvimento omisso em 100% da chatísse das hacks 🙁
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!