Guerra contra o terror

Os porques de no desenvolver para browsers antigos

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 Mais cdigo, mais manuteno Mantendo duas verses Mais imagens, menos velocidade Mais investimento... muito mais. Se protegendo contra o inevitvel Comentrios Condicionais CSS Hacks Javascript pode ajudar No customize elementos restritos Mire os motores de renderizao e no os browsers
Gecko Presto Webkit Trident

5 5 5 6 6 6 7 8 10 12 12 12 13 13 15 15 15 16 16 16
17 17 17 18

Perfeito at onde podemos chegar Gracefull Degradation e Progressive Enhancement Prefixos dos browsers Concluso

19 19 20 22

Links e fontes importantes

23

"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 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. 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 por exemplo aqueles celulares que s conseguem ler WAP. Este documento no tcnico. Por isso no enchemos esse documento de cdigos. Ele te d ideias e aponta o caminho das pedras.
1

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

Quero dizer isso novamente para que fique claro: no estou dizendo para voc deixar de dar suporte a estes meios de acesso. Certamente voc perderia dinheiro e tempo se fizesse isso. Quero sugerir outro caminho, um caminho mais inteligente.

Um motivo: 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 Countdown2, 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. No ms de Fevereiro de 2011, de acordo com a Net Applications3, 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 Memex 5, criado por Vannevar Bush 6. 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.

2 3

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

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.

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 por meio deste cdigo 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. 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. 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.

7 8

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

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? 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 Project9. 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/ 9

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. 2. 3. 4. 5. Chrome 9 Firefox 3.6 (j possvel baixar o Beta 4) Internet Explorer 8 (j possvel baixar o Beta 9) Opera 11 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 quando o Firefox surgiu 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. Temos que entender que o IE tem tantos adeptos por conta do monopolio 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, mas agora com a verso dos browsers descritas para que tenhamos uma viso mais interessante do mercado.

10

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.

11

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 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
12

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.

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 que tenham fundo com gradiente fiquem na posio correta para que no haja diferenas de cores entre o background e o GIF.

13

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.

14

Se protegendo contra o inevitvel

Existe algumas caminhos que podemos tomar para que o inevitvel fique mais brando. Caso voc decida suportar browsers antigos no seu projeto estes caminhos podero te ajudar a se manter so 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 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
6 7 8 Lembre-se: use com moderao.

Exemplo de Hack
_width: 200px; *width: 200px; width: 200px\0/;

15

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. 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 flexivel com os quatro cantos arredondados, precisamos inserir no HTML 4 elementtos 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. 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.

16

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
Firefox, Mozilla, Flock Opera Internet Explorer Safari, Chrome, Mobile Safari e browser para Android, novos browsers da BlackBerry e alguns outros da Nokia

Motor
Gecko Presto Trident

Webkit

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.

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 BlackBerry10 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
10

http://migre.me/3ZpvQ 17

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.

18

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. A melhor sada entregar a melhor experincia que estes usurios podem ter sem prejudicar o trabalho da equipe de produo. Os usurios crsticos 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 Degradation11 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
19

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 adquao 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.

Browser
Opera Safari Firefox Chrome Internet Explorer

Prefixo
-o-webkit-moz-chrome-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;.
12

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

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.

21

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 se mudar 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.

22

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

23