Criação de Cross-Browser Compatível Sites
Postado no Desempenho WP Engine
atualizada por Último sobre 30 de Maio, 2019
embora a maioria das pessoas stick para utilizar um único navegador, você tem dezenas de opções para desktop e dispositivos móveis. Idealmente, os sites seriam exibidos perfeitamente, independentemente de qual navegador você usou. No entanto, nem sempre é esse o caso, que é onde o teste entre navegadores entra.
com testes completos entre navegadores, você pode garantir que seu site tenha uma aparência e se comporte perfeitamente em todas as opções populares. Dessa forma, seus visitantes terão uma experiência igualmente ótima, seja usando o Chrome, Firefox, Opera ou opções menos conhecidas, como o SeaMonkey.
neste artigo, vamos falar um pouco mais sobre a importância do teste entre navegadores. Em seguida, analisaremos algumas etapas para ajudá-lo a criar um site compatível com vários navegadores. Vamos trabalhar!
Por Que A Compatibilidade Entre Navegadores É Importante?
A maioria das pessoas usa navegadores conhecidos, como Google Chrome, Safari, Firefox e Opera. No entanto, são muito mais opções disponíveis do que você imagina. Isso é bom para o consumidor, mas o problema para você é que cada navegador é construído de forma diferente. Isso significa que seu site pode funcionar perfeitamente no Chrome, mas ter problemas no Firefox (apenas para dar um exemplo).
em nossa experiência, a maioria dos erros que você verá em um navegador, mas não em outro, são problemas relativamente pequenos. Um elemento específico do seu site pode não olhar para ele deve, ou um recurso específico pode não funcionar corretamente. Embora esses problemas possam ser menores, eles precisam ser resolvidos se você quiser fornecer a mesma experiência a todos os visitantes do seu site.
idealmente, você vai querer projetar seu site para ser cross-browser compatível a partir do zero. Dessa forma, você não correrá o risco de alienar os usuários de nenhum navegador específico. Nas próximas seções, mostraremos como fazer isso.
como criar um site compatível com Cross-Browser
A ideia de criar um site compatível com cross-browser pode parecer assustadora. No entanto, algumas etapas simples podem percorrer um longo caminho para garantir que seu site funcione perfeitamente na maioria dos navegadores. Vamos falar sobre o que são!
Passo 1: Defina um ‘Doctype’ para seus arquivos HTML
quando um navegador carrega seu site, ele precisa descobrir qual versão do HTML você está usando. Isso é importante, porque diferentes versões do HTML contêm regras diferentes.
um ‘doctype’ é uma instrução que informa aos navegadores: “Ei, esta é a versão do HTML que vamos usar! Dessa forma, os navegadores não terão que fazer suposições, o que pode diminuir o número de erros que seus usuários encontrarão.
Felizmente, esta etapa é notavelmente simples. Tudo o que você precisa fazer é adicionar o seguinte trecho de código aos seus documentos HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
como você notará, este trecho é para a versão 4.01 do HTML. Se você quiser usar HTML5 em vez disso, você pode usar este código:
<!DOCTYPE html>
o problema é que alguns navegadores ainda não funcionam bem com HTML5. Apesar de suas muitas melhorias, usá-lo pode afetar a compatibilidade entre navegadores, então você precisará pesar esse fato junto com suas vantagens.
Etapa 2: Use as regras de redefinição CSS
Geralmente, o CSS é o principal culpado por trás dos erros de compatibilidade do navegador. Isso porque cada navegador tem seu próprio conjunto de regras CSS. Dito de outra forma, o CSS do seu site pode renderizar de maneira diferente, dependendo do navegador que seus visitantes usam.
uma maneira de resolver esse problema é usar uma ‘redefinição CSS’. Esses são conjuntos de regras que você pode adicionar ao seu site, que definem uma linha de base para a maneira como o CSS funciona nos navegadores.
existem várias opções quando se trata de redefinições CSS, mas um dos nossos favoritos é chamado Normalize.css, devido ao quão abrangente é:
você pode baixar o normalize.arquivo css de sua biblioteca GitHub e usá-lo como um ponto de partida para CSS do seu site. Isso ajudará você a maximizar a compatibilidade entre navegadores em seu site.
Passo 3: Use Bibliotecas e estruturas compatíveis com navegadores cruzados
bibliotecas JavaScript e estruturas amplas, como Foundation e Bootstrap, são incrivelmente populares atualmente. Se você vai usar esses elementos para construir seu site, você pode economizar muitas dores de cabeça usando opções amigáveis entre navegadores.
algumas bibliotecas e estruturas foram desenvolvidas desde o início para trabalhar com o maior número possível de navegadores. De um modo geral, as estruturas mais populares – incluindo as duas que acabamos de mencionar – são construídas para serem compatíveis com o maior número possível de navegadores.
apenas para estar seguro, no entanto, certifique-se de verificar a documentação de qualquer biblioteca ou estrutura que você pretende usar. Na maioria dos casos, você encontrará informações sobre compatibilidade entre navegadores com bastante facilidade. Por exemplo, aqui está a página de compatibilidade da Fundação de sua documentação:
uma pequena pesquisa irá ajudá-lo a fornecer uma experiência incrível para todos os seus visitantes, não apenas aqueles que usam um navegador específico.
Cross-Browser Testing
mesmo se você fez um esforço para criar um site compatível com cross-browser, ainda é uma boa ideia verificar e ver se tudo está funcionando como deveria. Esse processo é relativamente simples-tudo o que você precisa fazer é carregar seu site usando vários navegadores e verificar se há erros.
o problema é que existem muitos navegadores por aí. Para cobrir suas bases, recomendamos que você se concentre nas cinco principais opções de acordo com a participação de mercado, que são:
- o Google Chrome
- Safari
- Firefox
- UC Browser
- Opera
Você pode notar que o Microsoft Borda não fazer a lista. Sua participação de mercado é bastante pequena nos dias de hoje, mas ainda é uma boa prática garantir que seu site também funcione com ele.
claro, instalar cinco ou seis navegadores diferentes em seu computador pode ser uma dor. É por isso que existem muitos serviços que permitem realizar testes entre navegadores on-line. Isso simplifica muito o processo, e as taxas envolvidas geralmente são menores.
não sacrifique sua experiência Digital
nem todos os visitantes do seu site usarão o mesmo navegador. Isso significa que, se você quiser garantir que cada usuário aproveite seu site, precisará fazer alguns testes entre navegadores.
tenha em mente, no entanto – mesmo que seu site funcione perfeitamente em todos os navegadores, você ainda precisa usar um host da web de alta qualidade se quiser fornecer a melhor experiência digital possível. Com o WP Engine, você obtém um desempenho incrível e acesso ao suporte de nível de especialista, então confira nossos planos!