Guerra contra o terror

Os porqus de no desenvolver para browsers antigos

tableless.com.br

Introduo

Essa deciso importante

Para que serve este documento?

A Microsoft no quer mais continuar com o IE6

O bsico

Para que serve o HTML?

O comeo e a interoperabilidade

Introduo a Guerra dos Browsers

O mercado de browsers

Tudo mais chato

10
13

15

Mais cdigo, mais manuteno

15

Mantendo duas verses

16

Mais imagens, menos velocidade

17

Mais investimento... muito mais.

17

Se protegendo contra o inevitvel

19

Comentrios Condicionais

19

CSS Hacks

20

Javascript pode ajudar

20

No customize elementos restritos

21

Mire os motores de renderizao e no os browsers

21

Gecko

22

Presto

23

Webkit

23

Trident

23

Chaveando uma verso de browser

23

A metatag X-UA-Compatible

24

Perfeito at onde podemos chegar

26

Gracefull Degradation e Progressive Enhancement

27

Prefixos dos browsers

28

Concluso

30

Links e fontes importantes

31

"It is fatal to enter any war without

the will to win it."
- General Douglas MacArthur

Introduo

Essa deciso importante

muito difcil tomar a deciso de no suportar browsers antigos ao produzir um grande site. Sempre h
um nmero que se elevado a milhes de usurios o problema pode se agravar. Para uma grande empresa
que tem 10 milhes de clientes, ignorar 1% destes usurios algo realmente fora de questo. O ponto
que voc no precisa ignorar estes valiosos 1%. Mas tambm no precisa gastar milhes perdendo tempo
tentando resolver os problemas que estes usurios trazem para a produo. Nossa ideia aqui dar a
melhor experincia que eles podem ter sem prejudicar os outros 99%.
O nmero de 1% que eu citei acima simblico. Este 1% varia de empresa para empresa. Depende do
porte, depende do mercado. Pode ser que no seu caso eu esteja falando de um mercado de 80.000
usurios, mas que 10% destes usurios utilizam um browser antigo. Quero que entenda que voc ou o seu
cliente no vai perder seus visitantes/usurios/clientes. Entenda que esse documento traz informaes
importantes para que voc economize tempo e dinheiro e saiba realmente qual o problema. Acredite,
mais fcil do que se imagina. Mas primeiro preciso que voc visualize o cenrio. Se quiser pular toda essa
baboseira, no faa isso. Tente tomar um tempo para ler e entender exatamente o que quero dizer aqui.

Para que serve este documento?

Este documento recomendado para qualquer um que trabalhe com Web. No importa se voc
desenvolvedor, gerente, diretor, PMO, CIO, CEO, DPT 1, ou qualquer outra sigla desinteressante que esteja
escrito no seu crach. Se seu mercado o mercado de web, voc precisa ler este documento ou perder
tempo e dinheiro ao desenvolver seu site.
Quero mostrar qual sua linha de corte. Essa linha de corte vai faz-lo concentrar esforos para os
problemas reais, voc vai poder realocar as pessoas da sua equipe para tarefas realmente importantes e
1

Abreviao da posio empresarial chamada Dono da P*rra toda.

6

economizar dinheiro ao produzir um website (portal, sitezinho, sistema ou aplicaes baseadas em web)
diminuindo o tempo de manuteno, de produo e equipe.
Se voc for um diretor ocupado e no quer perder tempo com este assunto, passe esse documento para
um gerente de confiana e pea para que ele resolva o problema.
Se voc o gerente que recebeu esse documento e acha que tem coisa melhor pra resolver, d para um
desenvolvedor de confiana da sua equipe. Alm deste documento d a ele autonomia. Os resultados viro
e provavelmente voc ser promovido.
Este documento explica quais os problemas de manter o suporte a browsers antigos e outros meios de
acesso que podem nos traer problemar por causa da sua falta de suporte aos padres atuais de
desenvolvimento. Mas mais do que explicar os problemas, ele d solues e sugestes que podem ser
seguidas para diminuir custos na produo.
Este documento no mais uma campanha para que o Internet Explorer 6 seja extinto. Eu no falo aqui
apenas sobre o IE6, mas tambm sobre qualquer browser ou meio de acesso antigo ou que traga
problemas para a produo. Usarei o IE6 como exemplo durante todo o documento apenas porque ele o
caso mais comentado entre os desenvolvedores. Mas isso se aplica a browsers como Firefox 3.0, Internet
Explorer antigo para mobiles e outros meios de acesso antiquados como celulares que s conseguem ler
WAP. Este documento no tcnico. Ele te d ideias e aponta o caminho das pedras.
Quero dizer isso novamente para que fique claro: no estou dizendo para voc deixar de dar suporte a aos
meios de acesso antigos, como os browsers velhos. Certamente voc perderia dinheiro e tempo se fizesse
isso. Quero sugerir outro caminho, um caminho mais inteligente.

A Microsoft no quer mais continuar com o IE6

Este deve ser um motivo muito relevante para tomar uma deciso sensata. A Microsoft lanou no dia
04/03/2011 um website chamado The IE6 Countdown 2, onde ela incentiva fortemente a migrao do IE6
para uma verso mais atual, no caso o IE9. Claro que a Microsoft no est indicando a migrao para
qualquer um dos browsers concorrentes, mas c entre ns, isso no importa. O que realmente importa
que a prpria Microsoft est ciente dos problemas que o IE6 acarreta na produo web.
O interessante que a Microsoft sabe que algumas empresas tem srias restries de upgrade de
software e por isso ela divulgou alguns estudos de casos de grandes empresas que fizeram a migrao,
como a Dell.
No site voc tambm encontra um estudo de impacto financeiro referente a migrao do IE6 para o IE8.

http://theie6countdown.com/
7

No ms de Fevereiro de 2011, de acordo com a Net Applications 3, o IE6 tinha 12% de marketshare no
mundo todo. A Microsoft quer diminuir essa porcentagem para menos de 1% com a ajuda da campanha.
Voc pode seguir a campanha pela hash tag no Twitter #ie6countdown.

O bsico
Voc j deve saber para que serve o HTML. Mas se quiser se aprofundar ainda mais sobre assunto, abaixo
descrevo o conceito e a teoria da utilidade do HTML. algo bem simples de ser entendido e que mesmo
voc no sendo tcnico conseguir assimilar bem.
Se voc quiser pular essa parte, fique vontade, mas aconselho de verdade que voc a leia em algum
momento posterior.

Para que serve o HTML?

A Web foi criada para ser um ambiente onde fosse possvel trocar informaes livremente e que essas
informaes pudessem ser acessadas ao redor do planeta por qualquer pessoa ou meio de acesso. Em
1994, foi criado o W3C4 (World Wide Web Consortium): um consrcio internacional onde so
desenvolvidas os padres para a web (Web Standards) tais como: HTML, CSS, XML, XSLT, entre outros.
O HTML baseado no conceito de Hipertexto. Hipertexto so conjuntos de elementos ou ns ligados
por conexes. Voc pode chamar este ns de LINKS. Estes links podem ser elementos como palavras,
imagens, vdeos, audio, documentos etc. Eles no esto conectados linearmente como se fossem textos
de um livro, onde um assunto ligado ao outro seguidamente. A conexo feita em um hipertexto algo
imprevisto que permite a comunicao de dados, organizando conhecimentos e guardando informaes
relacionadas.
H muita histria por trs disso. Se estiver mais interessado do que eu imagino leia sobre Memex5, criado
por Vannevar Bush6.
Para distribuir informao de uma maneira global, necessrio haver uma linguagem que seja entendida
universalmente por diversos meios de acesso. O HTML se prope a ser esta linguagem.
Desenvolvido originalmente por Tim Berners-Lee o HTML ganhou popularidade quando o Mosaic browser desenvolvido por Marc Andreessen na dcada de 1990 - ganhou fora. A partir da,
desenvolvedores e fabricantes de browsers utilizaram o HTML como base, compartilhando as mesmas
convenes.
3

http://www.netapplications.com/
http://www.w3.org/Consortium/
5 http://en.wikipedia.org/wiki/Memex
6 http://en.wikipedia.org/wiki/Vannevar_Bush
4

O comeo e a interoperabilidade
Entre 1993 e 1995, o HTML ganhou as verses HTML+, HTML2.0 e HTML3.0, onde foram propostas
diversas mudanas para enriquecer as possibilidades da linguagem. Contudo, at aqui o HTML ainda no
era tratado como um padro. Apenas em 1997, o grupo de trabalho do W3C responsvel por manter o
padro do cdigo, trabalhou na verso 3.2 da linguagem, fazendo com que ela fosse tratada como prtica
comum. Voc pode ver as mudanas em http://migre.me/3ZhIF.
Desde o comeo o HTML foi criado para ser uma linguagem independente de plataformas, browsers e
outros meios de acesso. Interoperabilidade significa menos custo. Voc cria apenas um cdigo HTML e
este cdigo pode ser lido por diversos meios, ao invs de verses diferentes para diversos dispositivos.
Dessa forma, evitou-se que a Web fosse desenvolvida em uma base proprietria, com formatos
incompatveis e limitada.
Por isso o HTML foi desenvolvido para que essa barreira fosse ultrapassada, fazendo com que a
informao publicada fosse acessvel por dispositivos e outros meios com caractersticas diferentes, no
importando o tamanho da tela, resoluo, variao de cor, dispositivos prprios para deficientes visuais e
auditivos ou dispositivos mveis e portteis. O HTML deve ser entendido universalmente, dando a
possibilidade para a reutilizao dessa informao de acordo com as limitaes de cada meio de acesso.

Introduo a
Guerra dos
Browsers

No quero me alongar muito nessa histria porque no o foco aqui. Mas para
contextualizar nossos cenrios muito bom que voc entenda o incio destes
problemas. Quero que voc saiba que estes problemas comearam a acontecer
de forma devagar e indolor.

O browser que popularizou a web foi o Mosaic. Entenda que o Mosaic no foi o primeiro browser criado.
Mas foi ele que deixou a web popular entre as pessoas comuns.
Antes disso, o Tim Berners-Lee em um computador NeXT, criou o primeiro browser chamado
WorldWideWeb 7, lanando apenas para um grupo de estudantes no CERN em Maro de 1991. Depois dali
criou-se alguns outros browsers que foram mais populares em alguns nichos e universidades.

http://en.wikipedia.org/wiki/WorldWideWeb
10

O Mosaic8 foi criado pelo Marc Andreessen e Eric Bina.

A partir da todos os browsers, at mesmo os atuais, foram inspirados pelo Mosaic. At hoje os browsers
carregam algumas caractersticas de uso e elementos herdados do Mosaic.

Depois que James H. Clark investiu no projeto o Mosaic virou Netscape. E aqui que comea nossa guerra.
O Netscape ento virou o browser mais popular da web e era atualizado com frequencia trazendo
novas features para seus usurios. O primeiro Internet Explorer foi lanado no Windows 95 Plus.
A partir da os dois browsers comearam a briga por usurios. Era uma briga ferrenha onde cada um dos
browsers tentava se adiantar e lanar uma verso melhor que a outra. At a, timo. Concorrncia sempre
bom! O problema que o W3C neste tempo ainda era muito imatura. Os padres que eles sugeriam no
eram reconhecidos e como eu disse, eram apenas sugestes e recomendaes de uso. O W3C nunca pode
impor o que os desenvolvedores devem ou no seguir e a mesma coisa se aplica os fabricantes de
browsers.
Alguns dos pontos mais importantes para o desenvolvimento de websites ainda no estavam claros o que
levou a Netscape e a Microsoft criarem cdigos proprietrios. Quem no se lembra das tags LAYER,
BLINK e MARQUEE?

http://en.wikipedia.org/wiki/Mosaic_(web_browser)
11

Outro problema foi que a popularidade da criao de websites com tabelas ganhou fora. Isso dificultou
muito a vida de todos ns at hoje e atrasou a adoo dos padres pelos desenvolvedores e pelos
fabricantes de browsers. O trabalho com as tabelas era insano. Levava-se muito tempo para fabricar um
website com um design elaborado. Algumas features interessantes de Javascript e CSS no funcionavam
uniformemente nos browsers o que levou os desenvolvedores a criarem sempre duas verses do website.
Era comum que ao entrar nos websites voc escolhia qual dos browsers voc estava usando para que voc
fosse redirecioando para o website correto.
Toda essa confuso durou algum tempo at que um grupo de desenvolvedores resolveram fazer uma
revoluo. Eles formaram um movimento chamado WaSP - Web Standards Project 9. Estes caras so os
responsveis por fazermos websites com padres web hoje. Eles convenceram todo mundo a
desenvolverem websites utilizando melhores prticas e de acordo com o que o W3C falava.
Sem dvida estamos vivendo um cenrio muito melhor do que o cenrio anterior. Isso tende a melhorar
com o tempo com toda a concientizao de seguir os padres web, tanto dos desenvolvedores quanto dos
fabricantes de browsers. A cada ciclo completado, ou seja, a cada browser antigo que se extingue, novas
portas se abrem e o trabalho com web fica mais interessante. O trabalho no diminui, mas com certeza
mais facilitado.

http://www.webstandards.org/
12

O mercado de browsers
Atualmente - at o dia em que escrevi este captulo (Janeiro de 2011) - existem 5 principais browsers. As
verses listadas so as atuais at a data de quando este documento foi escrito:
1. Chrome 9
2. Firefox 3.6 (j possvel baixar o Beta 4)
3. Internet Explorer 8 (j possvel baixar o Beta 9)
4. Opera 11
5. Safari 5
Todos eles tem quase 100% de suporte para o CSS 2.1 e parte do CSS 3, pelo menos a parte que facilita o
desenvolvimento. Apenas os browsers que tem motor Webkit (Chrome e Safari) tem suporte a CSS3
Animation ou 3D.
Abaixo segue um grfico de Janeiro de 2010 at Janeiro de 2011 que mostra o marketshare dos browsers
listados acima. Esta uma viso Global. Iremos analisar mais pra frente o mercado especificamente do
Brasil.

Veja que o Internet Explorer at hoje lidera o topo com uma pequena baixa. Desde o surgimento do
Firefox, o Internet Explorer tem perdido vagarosamente seus pontos de ano em ano. Com Chrome e Safari
isso melhorou um pouco, mas ainda assim a grande maioria utiliza o Internet Explorer como seu browser
padro. O interessante que agora o Firefox est perdendo espao para o Chrome e o Safari.
Temos que entender que o IE tem tantos adeptos por conta do monoplio da Microsoft. Mas o Internet
Explorer 8 e at mesmo a verso 7 em alguns casos no apresentam muitos problemas de renderizao
ou compatibilidade como o Internet Explorer 6 apresenta. Abaixo vemos o mesmo grfico colocado acima,

13

mas agora com a verso dos browsers descritas para que tenhamos uma viso mais interessante do
mercado.

Veja que o IE6 tem algo em torno de 5% de marketshare no mercado de browsers. O IE7 tem em torno de
10% e o IE8, liderando o trio com 30%.
O problema de se ter vrias verses de um mesmo browsers que em cada verso os fabricantes
implementam muitas atualizaes que podem quebrar a compatibilidade de alguns sites. Isso acontece
em atualizaes pontuais, como por exemplo os problemas que acontecem com o Firefox entre as verses
3.0 e 3.5/6. H muitas diferenas entre Firefox 3.0 e verses posteriores. A verso 3.0 representa
globalmente 1.53% dos usurios. Felizmente os usurios de Firefox entendem que o browser tem
atualizaes de tempos em tempos, facilitando a reciclagem de verses.

14

Tudo mais chato

Desenvolver para browsers antigos complicado. Muito complicado. Resolver

um problema que talvez levaria 10 minutos, poder levar 1 hora. Onde seriam
duas linhas de cdigo, na verdade sero 100. No estou exagerando. Voc
usar mais de tudo ao desenvolver para um browser antigo: mais pessoas, mais
tempo, mais cdigo. Gerando mais problemas de manuteno, mais
investimentos ao contratar mais pessoas, mais trabalho com monitoramento de
problemas e criao de solues.

Desenvolver para browsers antigos leva tempo. necessrio criar um planejamento estratgico sobre
quais sero as medidas para manter o projeto durante e aps a produo. no comeo que os gestores
devem tomar a deciso de nivelar por cima e manter a sanidade mental da equipe ou nivelar o
desenvolvimento por baixo, fazendo com que browsers de 10 anos atrs sejam tratados da mesma forma
que os browsers atuais.

Mais cdigo, mais manuteno

Lembre-se: quanto mais cdigo escrito, mais cuidado preciso. No estou dizendo que voc deve ficar
apavorado se um dos seus arquivos de CSS ficar com 4000 linhas de cdigo. Isso inevitvel dependendo
do tamanho do projeto. O problema se essas 4000 linhas no estiverem comentadas ao longo do

15

trabalho. Se a nomenclatura e a organizao dos elementos no for clara o suficiente para que um grupo
de pessoas entenda e o cdigo no fique travado no conhecimento de apenas um desenvolvedor.
H diversos motivos para que seu cdigo fique gigante. Manter a compatibilidade com browsers antigos
um destes motivos. Na verdade o motivo onde no h nada o que fazer para manter menos linhas de
cdigo. Quando um desenvolvedor est iniciando, normal ele escrever mais cdigo. Isso se resolve com
prtica e estudo. Quando temos um site com muitas animaes ou transies de elementos, normal que
o cdigo fique grande, mas isso pode ser resolvido tirando uma ou outra transio.
Quando o problema e compatibilidade com browsers antigos, no possvel diminuir a quantidade de
cdigo. Voc fatalmente vai precisar manter uma ou duas folhas de estilo CSS separadas para poder
manter sob controle as diferenas que variam entre quebras de layout ou diferenas de pixels na posio
dos botes. Abaixo falo mais sobre isso.

Mantendo duas verses

Em meados de 1996 os desenvolvedores eram obrigados a manter duas verses do mesmo site para IE e
Netscape. Naquele tempo os dois navegadores no se baseavam no W3C para renderizar o HTML e o CSS
da forma correta. Na verdade a culpa no era deles. O W3C ainda estava no comeo e eles no tinham de
verdade os padres definidos dessas linguagens. O que chamvamos de padres na verdade eram
rascunhos. Logo, o que os browsers no encontravam instrues sobre como fazer a implementao, eles
criavam suas prprias regras, gerando cdigos proprietrios. Resultado: o que o desenvolvedor fazia para
IE no funcionava no Netscape e vice-versa. Obviamente os browsers aproveitavam essa situao para
minar o campo do concorrente prejudicando a adoo do browser na comunidade.
Quando produzimos um site nivelando a compatibilidade por baixo, podemos gerar os mesmos
problemas que o cenrio do IE e Netscape, por isso precisamos de um plano para a manuteno. Voc
precisar manter este site em ordem, fazendo com que os elementos fiquem no lugar mantendo a
fidelidade visual entre os diferentes browsers. normal escolher na equipe um desenvolvedor,
dependendo do tamanho do projeto, para monitorar e manter o site para os browsers mais antigos. Esse
desenvolvedor ter apenas uma tarefa: manter a fidelidade visual e o comportamento dos elementos nos
diversos browsers. E aqui que comea o problema.
normal separarmos um ou dois arquivos de CSS para corrigir bugs nos browsers antigos. Alm de se
preocupar com o cdigo integral, feito para funcionar em browsers novos, precisamos lembrar de corrigir
e manter outra verso do CSS e Javascript para os browsers como o IE6. Qualquer alterao no cdigo,
necessrio reproduzir - muitas vezes utilizando hacks - nos arquivos que cuidam exclusivamente para os
browsers antigos. Em vez de fazer manuteno em um cdigo, voc precisa fazer em dois. No estamos
falando aqui apenas de CSS. Muitas vezes necessrio manter separados cdigos de Javascript para
manipular apenas os browsers antigos.

16

Mais imagens, menos velocidade

Fato: at a verso 8 do Internet Explorer no h suporte a bordas arredondadas. Para os outros browsers,
utilizamos apenas uma linha de cdigo. No necessrio criar imagens e elementos extras. Para o
Internet Explorer, na melhor das hipteses, precisamos criar dois novos elementos e duas imagens extras.
A voc fala: Voc tem preguia de criar duas imagens e digitar duas linhas a mais de cdigo? No
preguia. Para mim s um pouco mais de trabalho. O problema so as implicaes disso. Para manter o
controle terei que fazer esses elementos via javascript, isso significa mais processamento do Browser e
consequentemente mais processamento de mquina. Terei que baixar duas imagens a mais no servidor, o
que significa mais duas requisies de imagens. Se houver outros tipos de botes diferentes no site, sero
outras imagens a serem baixadas, requisitadas e montadas via Javascript para formar o boto.
H casos onde o uso de CMSs como o Vignette dificultam o uso de Javascript em elementos de uma forma
mais genrica. Ento o cdigo que colocaramos via JS para facilitar as coisas dever ser colocado
manualmente em cada elemento que precisa de bordas arredondadas.
O ponto aqui no criar mais imagens ou fazer mais linhas de cdigo. Isso importante evitarmos. O
problema que voc vai concentrar mais ou menos 30% do seu esforo de trabalho para tentar manter a
compatibilidade visual para um browser que tem um tempo de vida restante muito curto. No vale a pena
concentrar o tempo de um desenvolvedor para cuidar deste browser. Os usurios deste browser nem vo
perceber a borda arredondada dos botes. Para eles isso detalhe. Eles esto interessados se o site estar
ou no funcionando. Este o ponto principal e o que eu protejo aqui. Voc pode matar alguns
elementos visuais do site, mas ele ainda sim precisa funcionar perfeitamente em qualquer lugar.

Mais investimento... muito mais.

J vi sites serem vendidos por R$500 e outros por milhes. Obviamente o valor depende muito da
complexidade do projeto e do cliente. Se voc acha mesmo que vale a pena ter uma, duas ou mais
pessoas focadas em manter a compatibilidade com browsers antigos, prepare-se, isso vai sair caro e seu
projeto pode atrasar. o pior dos mundos. Ningum quer ter um projeto mais caro e que tenha mais
riscos de atraso. Para que voc realize melhor o que quero dizer: suponha que o valor de hora/homem
seja de R$100. Para implementar HTML/CSS/Javascript da home de um site, nos meus bons tempos, eu
levaria algo em torno de 4 horas... 5 se o layout for complicado. Isso nos d R$500. Se for contar com a
implementao do IE6, isso pode dobrar facilmente porque terei que criar um CSS apenas para este
browser. No poderei utilizar PNG porque ele no tem suporte a este tipo de imagem. Posso utilizar um
plugin de Javascript para tentar fazer funcionar o PNG, mas isso deixaria o site um pouco mais lerdo e no
h nenhum plugin que no d algum tipo de problema de conflito ou defeito na hora de renderizar que
valha o trabalho da implementao. Sem contar que se eu usar estes plugins, terei que listar todos os
meus elementos ou imagens que so PNG para que o script funcione sem problemas aparentes. Se eu
decidir no utilizar um script deste, terei que criar uma imagem em GIF para cada uma das imagens que
so PNG. Como o GIF no tem canal alpha de opacidade, terei que me manter atento para que as imagens

17

que tenham fundo com gradiente fiquem na posio correta para que no haja diferenas de cores entre o
background e o GIF.
Estamos falando apenas do recorte de imagens, sem contar as diferenas de layout e os bugs que preciso
prever para que os elementos no quebrem a diagramao do site.
Se colocarmos na ponta do lpis isso pode levar o dobro do tempo de desenvolvimento. Sem contar o
tempo de manuteno posterior ou algum planejamento de escalabilidade para o futuro. No nosso
exemplo o valor do sitezinho de R$500 virou algo em torno de R$1000 ou R$1500. Isso tudo gasta muito
tempo. E se tempo dinheiro, gasta-se muito dinheiro. E esse caso no justifica o investimento. O seu
dinheiro, quer dizer, o dinheiro do seu cliente foi pro belelu.

18

Se protegendo
contra o inevitvel

Existem alguns caminhos por onde podemos andar para que o inevitvel fique
mais brando. Caso sua deciso seja de suportar browsers antigos em seu
projeto, estes caminhos podero ajudar a manter tudo sob o controle. Alguns
caminhos podem ser duvidosos mas com certeza sero elementos cruciais para
salvar sua equipe de algum problema imediato.

Comentrios Condicionais
Os Comentrios Condicionais so blocos de comentrios em HTML criados especificamente para o Internet
Explorer. Eles servem para separar um determinado cdigo para que apenas o Internet Explorer consiga
entender e renderizar. Isso til porque de longe o Internet Explorer o que mais causa problemas de
diagramao.
Os Comentrios Condicionais podem ser chaveados para que uma determinada verso do IE. Eu sugiro
que se voc utilizar os comentrios, voc tente fazer isso para apenas a verso mais antiga do IE, que no
caso a 6. Se mesmo assim voc tiver problemas com outras verses do IE, a minha sugesto manter
um arquivo de CSS s para IE6 e outro para as outras verses. Isso tambm serve para Javascripts que

19

sero apenas utilizados para suprir necessidades de compatibilidade dos IEs, como por exemplo scripts de
PNG ou scripts que prometem melhorar a compatibilidade dos IEs com o CSS.

CSS Hacks
Os CSS Hacks so cdigos de CSS que aproveitam um bug de interpretao de um determinado browser
para fazer com que este mesmo browser entenda um determinado cdigo CSS. No uma boa prtica,
mas muitas vezes no possvel evit-la.
De ponto de vista de sintaxe, o CSS Hack errado. Veja um exemplo: quando voc coloca um underline
antes da propriedade do CSS, como por exemplo _width: 200px; essa propriedade s reconhecida pelo
IE6. Isso acontece porque a maneira errado escrever a propriedade do CSS com um underline na frente,
por isso os outros browsers ignoram esse cdigo, e ento voc tem a vantagem de poder escrever uma
propriedade de CSS que ser interpretado apenas no IE6. Se alguma coisa no layout estiver errada no IE6,
eu posso resolver assim.
O problema que isso no pode ser comum no cdigo de CSS. A ento prefervel que voc utilize
comentrios condicionais, separando um arquivo de CSS s para o IE6 para evitar o uso de Hacks. Abaixo
segue trs exemplos de hacks para os IEs:

Verso do IE

Exemplo de
Hack

_width: 200px;

*width: 200px;

width: 200px\0/;

Lembre-se: use com moderao.

CSS Hacks uma praga se no for utilizado com inteligncia e em lugares muito pontuais. No vale a pena
voc fazer Comentrios Condicionais se voc for apenas para acertar um erro de alguns linhas, nesse caso
o CSS Hack se encaixa muito bem. Mas s para casos pequenos desse tipo.

Javascript pode ajudar

O Javascript tem ganhado muita popularidade entre os programadores. uma linguagem muito verstil e
est presente desde o incio da web. Ela fecha o trio das trs camadas onde o HTML cuida da semntica e
exibio da informao, o CSS cuida do visual e apresentao dessa informao nos diversos meios de
acesso e o Javascript controla o comportamento dos elementos manipulando suas caractersticas via CSS.

20

Com os frameworks como JQuery fcil controlar o comportamento dos elementos. Para os
desenvolvedores client-side saber pelo um framework de Javascript essencial. Se voc programador
voc precisa aprender a linguagem. Frameworks de Javascript servem para facilitar o trabalho de
manipulao de comportamento dos elementos.
O Javascript pode ajudar muito na criao e estruturao de um website. Normalmente, quando queremos
manter a compatibilidade e visual fiel em todos os browsers, necessrio criar alguns elementos extras,
por exemplo, se quisermos fazer um box com largura e altura flexvel com os quatro cantos
arredondados, precisamos inserir no HTML 4 elementos que no tem significado semntico nenhum. Estes
elementos no traro informao nenhuma para o usurio final. Sero apenas teis para criar cantos
arredondados. Logo, no faz sentido colocarmos esse cdigo direto no HTML porque pode causar
problemas de acessibilidade e prejudicar a indexao dos buscadores. Por isso colocamos estes elementos
dinamicamente via Javascript. Por isso o Javascript um aliado forte para o desenvolvedor client-side.
Alm disso existem outros plugins que podem ajudar na adequao visual do site. Infelizmente quanto
mais especfico o plugin, pior o seu comportamento nos browsers antigos. Eu sugiro sempre tentar criar
scripts para utilidades simples. Sem inventar muito.

No customize elementos restritos

Chamo de elementos restritos objetos como Combo box (ou selectbox), checkbox e radio box. Eu no sei
quem falou para os designers de website que eles poderiam fazer uma arte bacana no photoshop para
estes elementos... A customizao destes elementos um problema. No h maneira fcil hoje me dia
para fazermos isso. O nico lugar que permite um nvel interessante de customizao destes elementos
via CSS no Mobile Safari presente no iPhone, iPod e iPad. Fora isso a personalizao muito restrita.
Conseguimos customizar campos de formulrios e textareas e mesmo assim com bastante custo e bugs
nos Internet Explorers.
Sempre que estiver envolvido com o incio do projeto, procure estes elementos customizados e tente falar
com o responsvel da equipe para manter o visual padro.
Outro problema para customizar estes elementos a acessibilidade a usabilidade. Os usurios esto
acostumados com os elementos do sistema. Customiz-los pode fazer com que o usurio se perca ou
fique em dvida sobre o elemento.

Mire os motores de renderizao e no os

browsers
Os browsers so muitos. Voc tem o Firefox, Safari, Opera, Chrome, Internet Explorer.
21

Se formos extrapolar as verses, s de Internet Explorer voc precisa se preocupar hoje com 3: IE6, IE7 e
IE8. Futuramente, se continuar do jeito que est IE9. O Firefox quer ter at o final de 2011 a verso 7 do
seu browser.
H tambm os browsers para mobiles: Browser do Android, Mobile Safari do iPhone, o browser do
BlackBerry e tambm dos celulares Nokia. Para quase todas essas plataformas tem o Firefox e alguns
outros browsers que prometem uma vida melhor.
Realmente so muitos browsers. Eu no gosto de focar nos browsers em si, prefiro me focar nos motores
de renderizao. Os browsers tem um motor (engine) que leem o HTML/CSS/Javascript e montam essa
informao na tela do usurio. Segue abaixo uma listagem destes motores:

Browser

Motor

Firefox, Mozilla, Flock

Gecko

Opera

Presto

Internet Explorer

Trident

Safari, Chrome, Mobile Safari e

browser para Android, novos
browsers da BlackBerry e alguns

Webkit

outros da Nokia

Veja que listamos diversos navegadores envolvidos em apenas 4 motores de renderizao. Normalmente
quando vrios browsers so feitos com um mesmo engine, eles tem comportamento praticamento iguais.
Ou seja, 90% das coisas que voc fizer com CSS e ver no Safari para Desktop, vai funcionar no iPad,
iPhone, iPod, Blackberry (s os novos) e alguns Nokia. Com uma pancada, voc resolveu vrios problemas.
Isso interessante j que a tendncia sempre aumentar o nmero de browsers. Quanto mais um nmero
de browsers se aglomerar de baixo de uma mesma engine, melhor para ns.
Abaixo segue algum comentrio sobre cada um dos engines mais populares.

Gecko
Motor com cdigo aberto. utilizado nas aplicaes da Mozilla: SeaMonkey, Camino, Firefox, Thunderbird
etc.
Gecko um motor herdado do antigo Netscape, baseado no Mosaic.
Depois da Guerra dos Browsers, a Netscape doou o motor de renderizao para a comunidade, que
culminou na criao da Mozilla.

22

Presto
Motor proprietrio da Opera Software. A Opera uma das empresas que mais inovam no mercado de
browsers. Embora eles tenham tecnicamente um dos melhores browsers para desktops, a verso mobile
a mais utilizada. Eles tem duas verses: Opera Mobile, para smartphones e Opera Mini, para celulares mais
bsicos. A Opera tambm est muito presente em outros mercados fora da web.

Webkit
Motor com cdigo aberto, utilizado hoje em aplicaes como Safari, Safari Mobile e Chrome, browser do
Google. A BlackBerry 10 j anunciou que vai fazer seus browsers com Webkit.
o mais novo motor de renderizao do mercado. Foi criado pela Apple, baseando-se no motor de
renderizao KHTML, que estava s presente em browsers para Linux, como o Konqueror. Aproveitando
que o KHTML um sistema OpenSource, a Apple modificou todo o seu cdigo, fazendo melhorias e
aperfeioando-o para criar seu browser o Safari.
A Apple fez vrias outras modificaes posteriores em cima desta primeira verso. Deu o nome de Webkit,
e hoje, conduz o desenvolvimento dessa plataforma.

Trident
o motor proprietrio da Microsoft. utilizado em aplicaes como Outlook e claro, no Internet Explorer.
Eles esto criando um novo motor, que foi utilizado no Internet Explorer 8 e ser usado em verses
posteriores.
Embora o Trident fora o primeiro a suportar completamente o CSS 1.0, atualmente ele o motor de
renderizao mais atrasado. A Microsoft vem fazendo um bom trabalho para tentar recuperar essa m
fama, mas mesmo assim, os outros motores do mercado esto muito alm.
Num futuro prximo a diferena entre um ou outro browser no ser apenas a capacidade do seu engine.
Todos esto caminhando para serem complacentes com os padres e isso um dia deixar de ser
problema. Bom para gente, bom para web.

Chaveando uma verso de browser

Para que possamos entender melhor este assunto, bom que possamos entender o que houve no
passado. Se voc j trabalhava com web entre os anos de 1999, 2000 e 2001, provavelmente voc vai
lembrar que durante algum tempo, tnhamos que nos virar para garantir a total compatibilidade dos
nossos sites em diversos browsers. Os principais eram o IE5, IE6, Firefox e Opera. Era uma poca que
como no comeo da bolha estava tudo acontecendo ao mesmo tempo. Os Padres Web estavam virando
moda, os browsers, pelo menos os mais inteligentes, estavam se virando para suportar os Padres, e os
usurios ficando mais espertos e ativos na internet. Tudo era muito passvel de erros de compatibilidade e
renderizao.

10

http://migre.me/3ZpvQ
23

O principal caso era do Internet Explorer 5 e Internet Explorer 6. Os dois browsers tem uma renderizao
muito diferente. O Internet Explorer 6 tem um suporte melhor ao CSS do que o IE5. Isso causou um
problema: pelo menos durante um certo tempo, ns tnhamos que prever a compatibilidade para o IE5. E
agora tnhamos que pensar tambm no Internet Explorer 6. Os dois renderizavam o CSS de formas bem
diferentes, o que causou um certo dilema que foi resolvido com a seguinte soluo: Chaveamendo pelo
Doctype.

O DOCTYPE (Document Type Definition, DTD) serve para indicar qual o tipo do documento o browser est
lendo. Ele define qual linguagem estamos utilizando e isso ajuda o browser a saber como ele deve tratar
aquele cdigo. O cdigo DOCTYPE deve ser escrito em primeiro lugar no cdigo HTML. Aqui eu falo um
pouco mais sobre o DOCTYPE.
A soluo seguinte: dependendo do DOCTYPE colocado no documento o browser renderiza da forma
antiga, chamada de Quirks Mode, caso contrrio o browser renderizaria a pgina no modo restrito,
chamado de Strict Mode, que o modo que o browser busca ter mais suporte com os Padres. Isso
aplicado para o IE6. Se colocarmos um DOCTYPE XHTML 1.0 ou um HTML 4.01 o Internet Explorer 6
renderiza no modo esperto, se colocarmos um DOCTYPE de uma verso velha do HTML como o HTML 3
ou se no colocarmos o DOCTYPE, o IE 6, renderiza a pgina como o IE5, com menos suporte aos
Padres.
Essa soluo foi feita para garantir uma certa retrocompatibilidade dos sites. Assim, o desenvolvedor que
prefiria manter a compatibilidade com o IE5, ele tem essa opo. Essa soluo foi tima no comeo e
felizmente o IE5 no demorou muito para morrer.

A metatag X-UA-Compatible
O Internet Explorer 8, quando lanado, foi uma promessa de um incio de melhora para os browsers da
Microsoft. Ele era o primeiro dos browsers a ter um nvel aceitvel de compatibilidade com os padres web
e foi uma forma de preparo para que os desenvolvedores se acostumassem quando novas verses como o
IE9/10 viessem trazendo novidades e sendo to compatveis e inteligentes quanto os outros browsers do
mercado.
Mas havia um problema: como lanar um browser ultracompatvel em um mercado cujo browser lder de
mercado quase no tem suporte aos novos padres? Lembra-se da regra Dont Break the Web?
A Microsoft no poderia utilizar novamente o truque do Doctype. Uma porque no era uma boa prtica e
outra porque ele j foi usado e gerou muitas confuses entre os desenvolvedores.
Desta vez a Microsoft resolveu criar uma tag chamada X-UA-Compatible para que o desenvolvedor
consiga forar o IE8 a renderizar as pginas como se fosse um IE7. Assim os desenvolvedores ganham
tempo para criar uma nova verso do website que no quebre no browser mais novo.

24

A sintaxe simples, segue abaixo:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Esta linha colocada dentro da tag HEAD do documento. No caso acima, estamos dizendo para o IE8
renderizar as pginas com os padres de suporte do IE7.
Se por um acaso outros browsers quiserem utilizar essa tag para seus prprios browser, tambm
possvel:

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />

Vai que o Firefox, Chrome, Safari e Opera tenham problemas com alguma verses de seus browsers...
Minha opinio que voc poder utilizar essa tag at o IE9 tomar conta de todo o mercado. O IE9 j
consegue ter um suporte aos padres fora do normal comparado com as verses antigas do Internet
Explorer, e por isso utilizar uma tag como essa ser intil.

25

Perfeito at onde
podemos chegar

Entenda que sempre haver aqueles que no utilizam browsers modernos. Eles
tem os motivos deles e estes motivos podem variar. A pessoa pode no
entender nada de tecnologia. Ou pode trabalhar em uma grande empresa onde
a atualizao de software feita de tempos em tempos e a atualizao
autonoma no e permitida. Ou por que ela no tem dinheiro para fazer o
upgrade do seu computador e utiliza uma verso antiga do sistema
operacional. H um entrave tecnologico a. A atualizao do browser vai
acontecer vagarosamente para os grupos citados acima. No temos controle
sobre isso. Mesmo assim no precisamos nos preocupar em entregar para um
browser antigo 100% de compatibilidade. Isso impraticavel. Mas no podemos
larg-los na mo, deixando-os com um site quebrado, que no funciona como
deveria, isso seria desrespeito.

26

A melhor sada entregar a melhor experincia que estes usurios podem ter sem prejudicar o trabalho
da equipe de produo.
Os usurios crticos no vo ligar se voc entregar o site para eles com bordas quadradas em vez de
arredondadas. Para o pblico com browsers modernos, as bordas arredondadas sero bem-vindas, mas
para o usurio que utiliza um browser que no reconhece a propriedade de CSS que cria as bordas
arredondadas automaticamente, entregaremos bordas quadradas.
O site vai ficar um pouco diferente do que o planejado pelo designer, mas valer a pena. As bordas
quadradas ser entregue para uma pequena parcela dos usurios e voc economizar tempo e dinheiro.
Estou dando o exemplo da borda arredondada porque um problema simples e recorrente em quase todo
projeto web.
Abaixo mostro algumas sadas para que voc consiga garantir a melhor experincia para todos os
usurios de acordo com as limitaes de cada software.

Gracefull Degradation e Progressive Enhancement

Gracefull Degradation 11 uma maneira de manter um visual homogneo entre seus visitantes. muito
fcil entender a tcnica: voc oferecer o melhor suporte visual possvel para os browsers antigos.
Suponha que o designer fez um boto com bordas arredondadas e sombra. Estes botes podem ser de
vrios tamanhos dependendo do tamanho da palavra e etc. No IE6 voc no conseguir criar um boto
assim apenas com CSS. Logo, alguns fatores ficaro de fora como a sombra e a borda arredondada. O
boto ainda vai existir, ainda vi funcionar, s no vai ficar bonito como quando visto no Safari, Firefox e
etc...
Alguns desenvolvedores discutem at hoje se essa tcnica realmente vlida. Muitos acham que isso
privar demais o usurio, obrigando-o a fazer um upgrade no browser, que as vezes, como j dito no
comeo do captulo, pode ser impossvel em alguns cenrios. Outros pela praticidade tcnica: voc faz seu
CSS ou JQuery funcionar perfeitamente em browsers modernos e espera que em browsers antigos ignorem
simplesmente os cdigos que no entendem. Mas e os cdigos que eles entendem pela metade?
Outro problema do Gracefull Degradation que o usurio de browsers antigos baixam cdigos que seus
browsers nunca usaro. Ou seja, de qualquer maneira, mesmo no vendo a sombra do boto, ele vai
baixar o cdigo que faz a sombra funcionar em outros browsers. Ele no v a sombra porque o browser
dele no entende o cdigo de sombra, por isso ignora. Este um dos motivos para que o Progressive
Enhancement ganha fora em detrimento do Gracefull Degradation.

11

http://en.wikipedia.org/wiki/Graceful_degradation
27

O Progressive Enhacement12 ou simplesmente PE faz o sentido contrrio. Em vez de voc colocar todas as
coisas lindas que voc quer e depois pensa em como retirar isso caso d defeito nos browsers antigos,
voc primeiro faz funcionar de maneira muito simples nos browsers antigos e depois comea a detalhar
tanto o visual quanto o funcional para que os browsers modernos funcionem melhor.
O Alysson Franklin, um dos editores do Tableless.com.br detalhou essas duas tcnicas em um artigo
muito bem escrito chamado Bem-vindo a Xangri-l dividido em 2 partes:
Parte 1 - http://www.tableless.com.br/bem-vindo-a-xangrila-parte-1
Parte 2 - http://www.tableless.com.br/bem-vindo-a-xangrila-parte-2
O Gracefull Degradation no invalidade pelo Progressive Enhancement. Os dois andam juntos e o
Progressive Enhancement totalmente inspirado no Gracefull Degradation. Arrisco dizer que ele e o
Gracefull Degradation aprimorado.

Prefixos dos browsers

Muitas das caractersticas do CSS - principalmente da sua verso 3 - ainda esto em fase de adequao e
testes, portanto elas no foram implementadas definitivamente em alguns browsers e para evitar conflitos
e tambm conseguir informaes de feedback sobre o funcionamento dessas propriedades para fazer
futuras adaptaes ou correes. Outro ponto importante, que algum destes fabricantes de browsers
podem querer suportar uma determinada propriedade que ainda no faz parte do core do CSS mas que
poderia ser muito til para voc utilizar em lugares especficos hoje, com muita cautela, claro.
A tabela abaixo nos mostra os prefixos dos principais browsers do mercado. Durante toda minha
experincia com Web, utilizei muitas vezes os prefixos do Firefox, Safari e Opera, quase nunca utilizei o
prefixo para Internet Explorer. Talvez, com a vinda do IE9 passemos a utilizar mais o prefixo da Microsoft
para implementar propriedades que eles estejam planejando incluir nas verses posteriores do IE, mas
no tenho tantas esperanas. A Microsoft precisa se esforar muito para recuperar a confiana dos
desenvolvedores.

12

Browser

Prefixo

Opera

-o-

Safari

-webkit-

Firefox

-moz-

http://www.alistapart.com/articles/understandingprogressiveenhancement/
28

Browser

Prefixo

Chrome

-chrome-

Internet Explorer

-ms-

Tenha em mente que os prefixos no so Hacks de CSS. Nem se comparam.

Com os prefixos voc est ajudando os fabricantes e o W3C a entenderem melhor novas propriedades.
Concordo com voc que o cdigo no fica muito bonito de se ver e que pode causar muito transtorno
quando mal organizado. Diferentemente dos css-hacks os prefixos fazem parte dos padres web. Os csshacks exploram uma falha/bug do browser criar um cdigo que apenas aquele browser leia ou ignore.
Normalmente para isso usamos a sintaxe do CSS de forma errada como: w\idth:200px; ou _width:200px;.
Fazendo isso estamos colocando o projeto em risco futuramente. Os browsers passaro a ignorar esse
cdigo e se seu CSS estiver baseado nele, provavelmente algo vai quebrar. Eu costumo sugerir esse tipo
de hack apenas para verses muito antigas do IE como a verso 6, que uma verso que no cenrio atual
oferece muitos problemas de compatibilidade.

29

Concluso

Realmente a ideia deste documento no degradar nenhum tipo de browser ou

bater de frente com equipes que optam em manter a compatibilidade nivelando
por baixo. No esse o intuito. Quero que voc desenvolva projetos mais
elaborados. No quero que voc gaste tempo e dinheiro toa se voc pode ter
resultados melhores mudando um pouco o foco do desenvolvimento. Quero
que voc entenda que os visitantes que utilizam browsers antigos so sempre a
minoria.

Lembre-se de que na web voc no pensa no passado, mas no futuro.

30

Links e fontes
importantes

http://www.alistapart.com/articles/beyonddoctype
http://www.zeldman.com/2009/05/21/a-new-answer-to-the-ie6-question/
http://en.wikipedia.org/wiki/List_of_web_browsers
http://en.wikipedia.org/wiki/History_of_the_World_Wide_Web
http://www.livinginternet.com/w/wi_browse.htm
http://en.wikipedia.org/wiki/Mosaic_(web_browser)
http://www.livinginternet.com/w/wi_mosaic.htm

31