O que devo considerar ao incorporar a compatibilidade entre navegadores em meus projetos?

Normalmente, quando eu construo um design de site, vou me concentrar em um navegador (Chrome) e construí-lo até a conclusão antes de abrir outro navegador. Depois de concluído, testarei em outros navegadores enquanto cruzo os dedos e espero que tudo esteja bem.

Estou ciente dos normalizadores CSS disponíveis que ajudam na consistência entre os navegadores, mas às vezes prefiro me abster de usá-lo para evitar inchaços desnecessários.

Eu só tenho preocupação com os navegadores mais recentes, e os designs perfeitos para pixels não são uma necessidade. Quais considerações de design (visuais e ocultas) devo estar ciente para evitar possíveis dores de cabeça ou "hacks CSS" como resultado de problemas de compatibilidade entre navegadores?

Considerando que você está direcionando apenas os navegadores mais recentes (no momento em que escrevemos o Chrome 37.x, Firefox 32.x, o Internet Explorer 11 deve cobrir os principais mecanismos de renderização mais recentes), é possível obter compatibilidade entre navegadores com bastante facilidade e, na maioria dos casos - hackear grátis, pois todos os navegadores mencionados oferecem suporte à maioria das mais recentes propriedades de HTML e CSS.

Algumas perguntas que você deve fazer antes de começar:

1.) Como vou me beneficiar do tempo / dinheiro gasto para fazer meu site parecer o mesmo navegador?

Se as muitas horas que você gastou otimizando seu site e fazendo com que pareça o mesmo em todos os navegadores não se pagam em um período de tempo razoável, é óbvio que você está perdendo seu tempo alcançando compatibilidade entre navegadores (exemplo: isso faz sentir / pagar para otimizar um site da intranet para Chrome / Firefox, se a biblioteca para a qual você trabalha tiver um contrato de 10 anos com a Microsoft para executar em seu software?).

2.) É importante que o conteúdo do meu site tenha a mesma aparência em todos os navegadores (pixel perfeito)?

Se não houver um motivo específico para que você precise de uma linha tracejada para ter a mesma aparência em todos os navegadores, não deve se incomodar com ela - deixe que o navegador a processe pelas regras de renderização. Ele não terá a mesma aparência em todos os navegadores, mas nenhum usuário comum verificará se o seu site tornou a linha tracejada a mesma no Firefox ou no IE. Os usuários tendem a usar um navegador para navegar no conteúdo - desde que todas as funcionalidades do seu site funcionem e pareçam atraentes visualmente, você está pronto. Os designs perfeitos para pixels são muito raramente necessários (você pode obtê-los para mostrar sua habilidade - especialmente em sites de portfólio de desenvolvedores pessoais).

3.) A funcionalidade do meu site pode funcionar em qualquer navegador?

Muitas das mais recentes técnicas HTML / CSS (/ JavaScript) não funcionarão em todos os navegadores, pois as especificações HTML / CSS mais recentes ainda estão longe de serem concluídas e os fornecedores de navegadores geralmente decidem incluir recursos de teste sem seguir a especificação OU a especificação foi alterada , enquanto o fornecedor ainda não lançou uma nova versão do navegador. Se for esse o caso, você tem duas opções:

• implementar um polyfill que imite o recurso não suportado desejado
• fornecer um substituto. Os fallbacks geralmente têm funcionalidade limitada, mas fornecem o suporte mínimo para que seu site não se desmonte quando o recurso não é suportado (até mesmo mostrar a mensagem " Seu navegador não suporta esse recurso " é melhor do que mostrar uma página em branco).

Algumas considerações ao criar seu site:

• Pense nos seus sites como módulos . Ao concluir o design de um módulo (digamos, navegação no site), teste-o em todos os navegadores que você pretende oferecer ao mesmo tempo. Se houver algum problema, tente corrigi-los antes de passar para o próximo módulo - é mais fácil depurar pequenos pedaços de código do que depurar o design concluído e não saber qual parte exatamente está causando o problema.
• Mantenha seu código no mínimo . Se você só precisa mostrar / ocultar uma div, não precisa implementar uma estrutura de terceiros para alcançá-la ( "jQuery insuficiente" ) - o JavaScript comum pode fazê-lo perfeitamente.
• Refatorar cedo e refatorar com freqüência . Muitas vezes, você pode perceber que escreveu muitas regras CSS para algo que poderia ter sido feito de uma maneira muito mais simples. Não tenha medo de refatorar seu código; isso tornará a sua vida e a vida do desenvolvedor em potencial que trabalhará mais tarde no seu código muito, muito mais fácil, pois haverá menos código para ler e menos margem de erro.
• Use prefixos de fornecedor . Muitos dos recursos mais recentes de CSS ainda exigem prefixo de navegador específico para serem executados, mesmo na versão mais recente. Forneça os nomes de propriedades prefixados pelo fornecedor antes do nome regular da propriedade CSS para fazê-lo funcionar no navegador desejado.

Essas seriam minhas principais considerações a serem consideradas antes de iniciar o trabalho.

Você precisa estar ciente da compatibilidade de certos elementos de HTML, CSS etc. com diferentes navegadores. Os elementos HTML5 mais recentes (e até mesmo alguns bits do CSS3) não funcionam em alguns navegadores, causando problemas em áreas do design.

Você pode verificar isso consultando muitas referências possíveis ( Mozilla Developer Network , CSStricks , CanIUse , w3schools (consulte também w3fools )). Geralmente, eles possuem uma seção de compatibilidade do navegador, que mostra em quais navegadores um elemento funcionará e se alternativas ou prefixos podem ser usados ​​para ajudar na compatibilidade - por exemplo:

O código condicional também pode ser usado para adicionar itens para fazê-lo funcionar em um navegador específico - por exemplo, para obter as versões 8 e menos do IE usar o HTML5shiv (para que os elementos HTML5 funcionem):

<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></sc/>
<![endif]-->

Embora fazer algo que funcione corretamente em primeiro lugar também seja bom.

Eu só tenho preocupação com os navegadores mais recentes, e os designs perfeitos para pixels não são uma necessidade.

Então você provavelmente está pronto para ir. Desde que você atenda aos padrões, não deve haver grandes surpresas nos navegadores se você estiver apenas visando o melhor e o mais recente. Apenas não dependa inteiramente de nenhum recurso CSS que ainda não seja amplamente suportado sem o planejamento de fallback.