20 dicas para compilar sites modernos com suporte a versões antigas do IE »
03mai 2013, às 08:59
Publicado em Artigos | Seja o primeiro a comentar (0) »
publicado por: Magno Valdetaro
Por:
Dave Methvin
Rey Bango
Ao longo dos últimos anos, passamos muito tempo conversando com desenvolvedores Web e o que mais ouvimos foi como é difícil criar sites que funcionem bem em várias versões de navegadores e dispositivos. Nós mesmos enfrentamos esse problema ao criar códigos para o projeto jQuery. Assim, compilamos uma lista dos nossos 20 padrões e práticas principais de codificação escolhidos durante a participação de incontáveis sessões de conferência e leitura de centenas de tutoriais. Esperamos que eles economizem seu tempo (e dor de cabeça) no processo de compilação.
Conceitos básicos entre navegadores
-
Os sites não precisam ser renderizados da mesma maneira em todos os navegadores
Uma preocupação comum entre desenvolvedores é garantir que seus sites sejam renderizados da mesma maneira em todos os navegadores, incluindo aqueles antigos. Isso nem sempre é necessário. Um caminho melhor é considerar o aprimoramento progressivo do seu site oferecendo uma experiência de linha de base de trabalho sólida aos usuários com navegadores antigos e uma interface do usuário mais avançada aos usuários com navegadores modernos.
-
Comece com um modelo sólido para simplificar o desenvolvimento.
Muitas dessas dicas já estão incluídas em um modelo de projeto como o HTML5 Boilerplate para economizar algum tempo. Estas regras funcionam igualmente bem tanto para projetos destinados a navegadores modernos quanto para os que precisam de suporte a navegadores mais antigos como o IE6.
-
Mantenha o foco em padrões estáveis
É fácil ficar empolgado sempre que um novo e interessante recurso é lançado, mas alguns desses ainda podem ser experimentais com especificações em desenvolvimento. É importante lembrar que os recursos nos estágios iniciais de desenvolvimento de especificações têm grande probabilidade de mudar, o que poderia impactar a estabilidade do seu site e a experiência do seu cliente. Ao manter o foco em padrões estáveis, você está garantindo que seus clientes poderão ter a experiência que esperam e seu site terá uma manutenção mais fácil.
-
Use o IE Compat Inspector para ajudar a migrar seu site para códigos baseados em padrões
Os padrões são uma parte essencial do Internet Explorer 10 e ajudar os desenvolvedores a migrarem seus códigos para aproveitar isso é incrivelmente importante para a equipe de engenharia do IE. É por isso que o IE Compat Inspector foi criado: para analisar seu site em tempo real, localizar padrões de problemas comuns e oferecer soluções. Ao incluir um único arquivo JavaScript em seu código, você receberá resultados visuais diretamente em suas páginas. Ele também pode ser integrado à ferramenta de análise Fiddler HTTP.
-
Use polyfills e shims com moderação
Se você definitivamente precisar fornecer a mesma experiência em todos os navegadores, os polyfills e shims oferecem código e marcação que podem ajudar a simular APIs e funcionalidade baseadas em padrões. O mais importante a lembrar é que você precisa examinar adequadamente o código para garantir que ele atenda ao seu caso de uso e que você possa oferecer suporte adiante.
-
Teste em vários navegadores durante o desenvolvimento.
Embora os navegadores modernos estejam mais próximos de um padrão único do que nunca, ainda existem diferenças. Um ponto de verificação ocasional da integridade de vários navegadores durante o desenvolvimento pode garantir que problemas graves entre navegadores não surjam no último minuto – ou pior ainda, após tudo vir a público. Verifique no console de cada navegador, como nas Ferramentas para Desenvolvedores F12 no IE, para ver se aparece alguma mensagem de erro ou aviso. Para navegadores mais antigos, como o IE7, que não têm um console interno, você pode usar o Firebug Lite para fornecer um. Ou usar uma solução de teste hospedada entre navegadores como o BrowserStack.
-
Use um processo de compilação com ferramentas para verificar erros e reduzir o tamanho dos arquivos.
Um bom conjunto de ferramentas de compilação, como validadores de HTML, validadores de CSS, Uglify e JSHint ou GruntJS, pode encontrar problemas latentes, aplicar padrões de código de projeto e reduzir o tamanho de arquivos para aumentar o desempenho. Essas etapas não precisam ser uma barreira, se o IDE ou editor de códigos for compatível com elas. O Visual Studio, por exemplo, oferece a capacidade de executar ferramentas externas e combinar/compactar arquivos de script durante seu processo de compilação.
HTML
-
Use sempre doctype baseado em padrões para evitar o Modo Quirks.
Comece com < !DOCTYPE html>. A Web moderna não tem lugar para o Modo Quirks, que foi projetado para que as páginas da Web de meados dos anos 1990 fossem utilizáveis nos navegadores “modernos” da virada do século, como o IE6 e o Firefox 2. A maioria das páginas da Web hoje acaba acidentalmente no Modo Quirks devido a um doctype inválido ou texto extrínseco antes do doctype. Isso pode provocar problemas estranhos de layout que são difíceis de serem depurados.
-
Compreenda os limites de compatibilidade com versões anteriores das marcas do HTML5.
As novas marcas do HTML5, como
, e -
Insira as referências do arquivo CSS na parte superior do arquivo HTML.
A inserção de arquivos CSS no corpo pode fazer com que o navegador mostre uma página em branco até que o CSS tenha sido carregado. Os arquivos CSS devem ser inseridos no cabeçalho do documento HTML para permitir que o navegador comece a buscá-los o quanto antes.
-
Insira as referências do arquivo JavaScript na parte inferior do arquivo HTML.
O navegador deve recuperar, analisar e executar um arquivo de script na marcação HTML antes que possa continuar analisando o restante do arquivo, caso o JavaScript escreva uma nova marcação na página. Com os scripts na parte inferior, o navegador pode sempre renderizar a página mesmo antes de os scripts estarem concluídos para que o usuário veja a página carregando mais rapidamente.
-
Evite marcas do JavaScript embutidas na marcação HTML.
Assim como ocorre com as referências externas de script, um script embutido exige que o navegador pare de analisar o HTML e também evite downloads paralelos de outros recursos na página. Isso pode atrasar seriamente o carregamento inicial da página e proporcionar ao usuário uma experiência terrível de “página em branco”. O script espalhado ao redor da marcação também é mais difícil de se manter.
-
Não use eventos JavaScript embutidos na marcação HTML.
Um exemplo seria . Essa prática quebra a separação clara que deveria existir entre a marcação, a apresentação e o comportamento. Além disso, se os scripts forem carregados na parte inferior do arquivo, o usuário poderá interagir com a página e acionar um evento que tente chamar um script que ainda não tenha sido carregado, provocando um erro.
CSS
-
Conheça e use as regras em cascata do CSS.
Os seletores simples de id e classe são úteis, mas usá-los exclusivamente significa que a marcação ficará mais suja e menos reutilizável com ids e classes desnecessárias. O uso de seletores de marca, descendente, filho, irmão e atributo em combinação com um pequeno número de ids e classes pode manter tanto a marcação quanto o CSS mais simples e geral. Evite o uso da regra “!important” de qualquer maneira.
-
Estabeleça prefixos para as propriedades do CSS específicas do fornecedor para prepará-las para o futuro.
Conforme os novos padrões de rascunho progridem, os fornecedores de navegador às vezes obtêm um avanço sobre o padrão adicionando suporte através de propriedades com prefixos. Para garantir que o CSS continue funcionando no future, use todos os nomes com prefixo de fornecedor, bem como os sem prefixo. Esta postagem de blog fornece uma alternativa JavaScript simples.
-
Solucione problemas de compatibilidade com regras de CSS válidas, não com hacks de analisador de CSS.
Os hacks de analisador de CSS não são confiáveis porque os navegadores podem ser atualizados fazendo com que esses hacks falhem. Em vez disso, tente adicionar classes específicas de versão ao html ou à marca de corpo que possam ser usadas nas regras de folha de estilo. Os comentários condicionais também podem ser usados para incluir um arquivo CSS específico de navegador somente nas versões que precisarem.
JavaScript
-
Prefira sempre a detecção de recursos à detecção de navegadores (navigator.userAgent).
A cadeia de caracteres userAgent é um indicador ruim da presença ou não de um recurso em particular (ou bug). Para agravar o problema, grande parte do código que interpreta o userAgent o faz de forma incorreta. Por exemplo, uma biblioteca de detecção de navegadores esperava que a versão principal fosse somente de um único dígito, assim, reportou o Firefox 15 como Firefox 1 e o IE 10 como IE 1. É mais confiável detectar o recurso ou problema diretamente e usá-lo como critério de decisão para ramificações de código. Recomendamos o Modernizr como a maneira mais fácil de implementar a detecção de recursos.
-
Execute a menor quantidade de script possível quando o documento estiver pronto.
As técnicas, como jQuery's $(document).ready(), facilitam a execução do script assim que o HTML é carregado na página, o que normalmente ocorre no primeiro momento em que ele possa ser executado com segurança. No entanto, a execução de muitos scripts complexos nesse ponto pode fazer com que a página pareça lenta e impeça o usuário de interagir de imediato. Muitas vezes, a inicialização de itens como uma dica de ferramenta ou caixa de diálogo pode ser atrasada até que o item precise realmente ser exibido, sem oscilações perceptíveis.
-
Inicie solicitações AJAX o quanto antes, se forem fundamentais para a interação do usuário com a página.
Como uma solicitação AJAX pode demorar muito, não é necessário aguardar que a página HTML esteja pronta antes de iniciá-la. Em vez disso, insira a chamada $(document).ready() na função de conclusão AJAX.
-
Execute delayload em scripts não essenciais (por exemplo, Curtir do Facebook, Google +1, Twitter).
Todos querem que sua página seja popular nas redes sociais, mas scripts de rede social tendem a ser grandes e podem provocar reposta lenta para o usuário. Aguardar até que a página tenha sido carregada antes de solicitar esses scripts pode fazer com que a página responda mais rapidamente. Melhor ainda, repense se esses botões são mesmo necessários e se melhoram a experiência geral de sua página.
Fonte: http://www.modern.ie/
