Qual é a melhor técnica para uma forma consistente e funcional entre todos os navegadores da web (incluindo o Google Chrome)?

Question

Versão curta:Qual é a técnica mais limpa e sustentável para apresentação consistente e função AJAX em todos os navegadores usados ​​por desenvolvedores web e usuários finais de desenvolvedores web?

• Ou seja, 6, 7, 8
• Firefox 2, 3
• Safári
• Google Chrome
• Ópera

Versão longa:Eu escrevi um aplicativo da web voltado para outros desenvolvedores da web.Quero que meu aplicativo suporte os principais navegadores da web (além do Google Chrome) tanto na apresentação quanto no comportamento AJAX.

Comecei no Firefox/Firebug e adicionei comentários condicionais para um estilo consistente no IE 6 e 7.Em seguida, para minha surpresa, descobri que o jQuery não se comporta de forma idêntica no IE;então eu mudei meu Javascript para ser portátil no FF e IE usando condicionais e jQuery menos puro.

Hoje comecei a testar no Webkit e no Google Chrome e descobri que não apenas os estilos são inconsistentes com o FF e o IE, mas o Javascript não está sendo executado, provavelmente devido a um erro de sintaxe ou de análise.Eu esperava algum trabalho de CSS, mas agora tenho mais depuração de Javascript para fazer!Neste ponto, quero dar um passo atrás e pensar antes de escrever pilhas de casos especiais para todas as situações.

Eu sou não estou procurando uma solução mágica, apenas práticas recomendadas para manter as coisas tão compreensíveis e fáceis de manter quanto possível.Prefiro que isso funcione sem inteligência do lado do servidor;entretanto, se houver uma vantagem de, por exemplo, verificar o agente do usuário e, em seguida, retornar arquivos diferentes para navegadores diferentes, tudo bem se a compreensibilidade e capacidade de manutenção total do aplicativo da web forem menores.Muito obrigado a todos!

Answer 1

Estou em uma situação semelhante, trabalhando em um aplicativo da web voltado para profissionais de TI e que precisa oferecer suporte ao mesmo conjunto de navegadores, menos o Opera.

Algumas coisas gerais que aprendi até agora:

• Teste com frequência, no maior número possível de navegadores de destino.Certifique-se de ter tempo para isso em seu cronograma de desenvolvimento.
• Os kits de ferramentas podem ajudar você a obter suporte entre navegadores, mas eventualmente perderão algo em alguns navegadores.Planeje algum tempo para depurar e pesquisar correções para navegadores específicos.
• Se você precisa de algo que não está em um kit de ferramentas e não consegue encontrar um trecho de código gratuito, invista algum tempo para escrever funções utilitárias que encapsulam o comportamento dependente do navegador.
• Eduque-se sobre bugs conhecidos do navegador, para que você possa orientar sua implementação em torno deles.

Algumas coisas mais específicas que aprendi:

• Use código condicional baseado no agente do usuário apenas como último recurso, porque diferentes gerações do "mesmo" navegador podem ter recursos diferentes.Em vez disso, teste primeiro o comportamento compatível com os padrões - por exemplo, if(node.addEventListener)..., então funções não padrão comuns - por exemplo, if(window.attachEvent)..., e, se necessário, consulte o agente do usuário para obter um tipo de navegador e número de versão específicos.
• Saber quando o DOM está “pronto” para acesso ao script é diferente em praticamente todos os navegadores.Um bom kit de ferramentas irá abstrair isso para você.
• Os manipuladores de eventos são diferentes em quase todos os navegadores.Um bom kit de ferramentas irá abstrair isso para você.
• Criar elementos DOM, especialmente controles de formulário ou elementos com atributos, pode ser complicado com document.createElement e element.setAttribute.Embora não seja padrão (e meio nojento), usar node.innerHTML com strings que contêm bits de HTML parece ser mais confiável em todos os tipos de navegador.Ainda não encontrei um kit de ferramentas que permita usar element.setAttribute para adicionar um 'nome' a um elemento de formulário no IE.
• As diferenças de CSS (e bugs) são tão importantes quanto as diferenças de JS.
• Os recursos Javascript 'principais' (funções String, Date, RegExp, Array) parecem ser bastante confiáveis ​​e consistentes em todos os navegadores, especialmente em relação às funções DOM/CSS/Window.Há uma pequena alegria no fato de que a linguagem não é totalmente diferente em todas as plataformas.:-)

Na verdade, não encontrei nenhum bug JS específico do Chrome, mas é sempre um dos primeiros navegadores que testo.

HTH

Answer 2

Na verdade, o Chrome é um pouco diferente do Safari, ele usa uma implementação de javascript completamente diferente e foram relatados problemas com protótipo e jquery.Eu não me preocuparia muito com isso por enquanto, ainda é uma versão beta inicial do navegador e tais inconsistências provavelmente serão tratadas como bugs.Aqui está o relatório de erro.

Answer 3

Uma "bala de prata" à qual você pode considerar recorrer é Kit de ferramentas da Web do Google (GWT).

Acredito que ele suporta todos os navegadores de seu interesse e oferece a capacidade de codificar sua UI em um IDE compatível com Java, como o Eclipse.A vantagem disso é que você pode usar ferramentas IDE para conclusão de código e verificação de erros em tempo de compilação, o que melhora muito o desenvolvimento em projetos de UI em grande escala.

Se você usar componentes de interface do usuário do GWT, ele impedirá que muitas coisas desagradáveis ​​​​específicas do navegador sejam tratadas, mas quando você compilar, criará um arquivo compacto de implantação para cada plataforma de navegador.Dessa forma, você nunca baixará nenhum código específico do IE se estiver visualizando o aplicativo no Firefox.Você também terá um stub do lado do cliente gerado que carregará o pacote compilado apropriado de JS.Para melhorar o negócio, esses arquivos podem ser armazenados em cache, de modo que o desempenho percebido geralmente é melhorado para visitantes recorrentes.

Answer 4

O cenário evoluiu consideravelmente para acomodar o desenvolvimento entre navegadores. jQuery, Protótipo e existem outras estruturas para Javascript entre navegadores. Redefinições de CSS são bons para começar em uma tela em branco comum para todos os navegadores. Planta e 960 são estruturas CSS para ajudar com layouts usando Layouts de grade CSS técnicas que parecem estar se tornando muito populares atualmente.

Quanto a outras peculiaridades do CSS nos diferentes navegadores, não existe nenhum Santo Graal aqui e a única opção é testar seu site em diferentes navegadores e usar isso. recurso incrível e definitivamente junte-se a uma lista de discussão para economizar algum tempo.

Se você estiver trabalhando em um site de produção de alto volume, poderá usar um serviço como browsercam.com no final do jogo para garantir que o site não quebre terrivelmente em algum navegador.

Por último, não tente fazer com que o site tenha a mesma aparência em todos os navegadores.Seu design principal deve ter como alvo o IE/FF e você deve concordar com compromissos razoáveis ​​em outros.Use o gráfico de navegador classificado para restringir o suporte do navegador.

Quanto às melhores práticas, comece a usar wireframes em papel em branco ou um serviço como Maquetes Balsamiq.Ainda estou surpreso com quantos desenvolvedores começam com um editor em vez de um wireframe, mas, novamente, só mudei um ano antes de perceber o quanto isso economiza tempo.Tenha uma separação clara de layout (HTML), apresentação (CSS) e comportamentos (Javascript).Não deve haver elementos de estilo em HTML, nem apresentação em Javascript (use .addClass('highlight') em vez de .css({'background-color': 'red'});).

Se você não está familiarizado com nenhum dos termos em negrito nesta postagem, pesquisá-los no Google deve ser proveitoso para sua carreira e produtividade em desenvolvimento web.

Answer 5

Se você está começando com uma redefinição ou estrutura básica e considerou o IE e ainda está tudo estranho, verifique novamente o seguinte:

• Tudo valida?CSS e HTML?
• Quaisquer links quebrados para um arquivo incluído (js, css, etc?).No Chrome/Safari, se o link da sua folha de estilo for quebrado, todos os seus links poderão ficar vermelhos.(algo a ver com o estilo 404 padrão, eu acho)
• Algum requisito estranho de seus plug-ins js que você possa estar usando?(o arquivo css precisa vir antes do arquivo js, ​​como jquery.thickbox?)

Answer 6

Para IU, confira Externo.

É ótima como uma biblioteca independente, embora também possa ser usada com jQuery, YUI, Prototype e GWT.

Amostras: http://extjs.com/deploy/dev/examples/samples.html

Answer 7

Descobri quatro coisas úteis no desenvolvimento de aplicativos JavaScript:

• Detecção de recursos
• Bibliotecas
• Desenvolvimento Iterativo usando Virtualização
• JavaScript:O Guia Definitivo, Douglas Crockford e John Resig

Detecção de recursos

Use a reflexão para perguntar se o navegador suporta o recurso desejado.Se você quiser saber qual manipulação de eventos um navegador suporta, você pode if(el.addEventHandler) para conformidade com W3C, if(el.attachEvent) para o tipo IE e, finalmente, recorrer a el.['onSomeEvent'].

UM GRANDE MAS!

Às vezes, os navegadores mentem sobre os recursos que suportam.Não me lembro, mas me deparei com problemas em que o Firefox implementava um recurso DOM, mas retornaria falso se você testasse esse recurso!

Bibliotecas

Como você já está trabalhando com jQuery, vou guardar a explicação.Mas se você estiver enfrentando problemas, considere o YUI, pois é uma compatibilidade maravilhosa entre navegadores.Eles até trabalham juntos.

Desenvolvimento Iterativo com Virtualização

Talvez meu melhor conselho:Execute todos os seus ambientes de teste de uma só vez.Obtenha uma distribuição Linux, Compiz Fusion e muita RAM.Baixe uma cópia do VMWare Server da VMWare ou do Virtual Box da Sun e instale alguns sistemas operacionais.Obtenha imagens para Windows XP, Windows Vista e Mac OS X.

A ideia básica é esta:Compiz Fusion oferece 4 desktops mapeados em um cubo.Um desses desktops é o seu computador Linux, o próximo é a caixa virtual do Windows XP, o seguinte é o Vista, o último Mac OS X.Depois de escrever algum código, você usa Alt-Tab no computador virtual e verifica seu trabalho.Além disso, parece incrível.

JavaScript:O Guia Definitivo, Douglas Crockford e John Resig

Essas três fontes fornecem a maior parte das minhas informações para o desenvolvimento de JavaScript.O guia Definitivo é talvez o melhor livro de referência para JavaScript.

Douglas Crockford é um guru de JavaScript (odeio essa palavra) no Yahoo.Pesquise suas séries "Douglas Crockford Theory of the DOM", "Douglas Crockford Advanced JavaScript", "Douglas Crockford Theory of the Dom" e ""Douglas Crockford The Good Parts" no Yahoo!Vídeos.

John Resig (como você sabe) escreveu jQuery.Seu site em ejohn.org contém uma riqueza de informações sobre JavaScript e, se você pesquisar no Google, descobrirá que ele fez diversas apresentações sobre técnicas defensivas de JavaScript.

...Boa sorte!

Answer 8

Só para que você tenha um navegador a menos com que se preocupar, o Chrome usa o mesmo mecanismo de renderização do Safari.Portanto, se funcionar no Safari, deverá funcionar exatamente da mesma forma no Chrome.

Ver esta postagem no blog de Matt Cutts.

O Google Chrome usa WebKit para renderização, que é o mesmo mecanismo de renderização do navegador Safari da Apple, portanto, se o seu site for compatível com o Safari, ele deverá funcionar muito bem no Chrome.

Atualizar:Parece que esta informação está desatualizada.Por favor, veja o comentário da Vox sobre esta resposta.

Answer 9

Se sua prioridade máxima é uma apresentação exatamente consistente em todos os navegadores listados, sem disparidades, você provavelmente deveria estar olhando para AS3 e Flex.

Answer 10

Pessoalmente, eu uso Mootools como uma estrutura javascript simples e leve.É simples de usar e suporta todos os navegadores acima (exceto o Chrome, mas parece funcionar também, pelo que posso dizer).

Além disso, para garantir consistência entre os navegadores, recebo um recurso/estilo/comportamento/etc.para funcionar primeiro em um navegador (geralmente Firefox 3 com firebug) e, em seguida, verifique imediatamente se funciona em todos os outros navegadores (deixando o IE6 por último).Caso contrário, invisto tempo para consertar imediatamente, porque senão sei que não terei tempo mais tarde (na minha experiência, fazer as coisas funcionarem em vários navegadores leva cerca de 50% do meu desenvolvimento.tempo ;-) )

Answer 11

Validando seu javascript com "partes boas" + navegador ativado JsLint. com torna menos provável que os JavaScripts se comportem de maneira diferente no FF, Safari etc.

Caso contrário - usar padrões e validar seu código, bem como desenvolver técnicas existentes como jQuery, deve fazer com que seu site se comporte da mesma forma em todos os navegadores, exceto o IE - e não há receita mágica para o IE - são apenas bugs por toda parte...