Teoricamente, criar uma página da web é fácil. Os principais aspectos incluem escrever um código HTML, testá-lo em um navegador da Web e carregá-lo. HTML e CSS são padrões, o que significa que uma página da Web que funciona bem em um determinado navegador pode não aparecer limpa em outros navegadores.

Claro, as coisas não parecem tão simples na prática. Há uma variedade de navegadores, com cada navegador exibindo HTML e CSS de uma maneira diferente.

Para garantir que as páginas da Web funcionem uniformemente em todos os navegadores da Web, a codificação entre navegadores deve ser praticada pelos designers da Web. Nesta postagem, discutiremos 10 dos truques testados e comprovados que você pode seguir para obter um site sem erros e pronto para vários navegadores.

Uma breve introdução ao CSS

CSS ou Cascading Style Sheets é um conjunto de instruções de formatação da web que controla a aparência das páginas da web. Alguns navegadores compatíveis com CSS são:

IE
Borda
Raposa de fogo
cromada
Safári
Ópera
iOS Safari
Ópera
navegador Android
Chrome para Android

Mas antes de chegar a uma conclusão de que isso economizará muito tempo, você deve entender que a maioria dos navegadores da web não oferece suporte total a todos os seus recursos.

CSS atua como um componente de representação que caracteriza os componentes de uma página da web. Ao mesmo tempo, as folhas de estilo em cascata controlam o design de várias páginas ao mesmo tempo.

Embora não haja segredo para a curadoria de um site compatível com vários navegadores que garanta a estética que você deseja, existem alguns aspectos que podem ser atendidos para melhorar suas chances. Aqui estão dez dicas fáceis de seguir, mas eficazes, para codificar um site cross-browser.

1 Quanto mais simples, melhor

Quanto mais complexos o HTML e o CSS ficam, mais propensos a erros e bugs. Tente manter o layout elementar na fase de design que é: um cabeçalho, algumas colunas e um rodapé. Se o seu design tiver várias caixas de barra lateral, as coisas ficarão agitadas à medida que o processo avança.

Evite usar muitos elementos aninhados e integre apenas os elementos necessários. Para criar um menu, use ul e li em vez de uma tabela ou uma série de elementos p.

2 Valide seu código HTML, CSS e RSS

Nada incomoda mais um designer do que estilizar cuidadosamente uma página da web e, quando chega a hora de testá-la, um erro desconhecido continua aparecendo. Em tais situações, um designer deve manter os nervos e começar com a marcação e a validação das folhas de estilo.

Existem muitas ferramentas gratuitas e pagas disponíveis na web para verificar se suas marcações HTML e CSS são legítimas. Com a ajuda dessas ferramentas, você pode ter certeza de que as marcações são perfeitas e as páginas da Web exibem o conteúdo da maneira que você deseja.

Firebug

Firebug é um depurador e editor tudo em um. Ele permite que um desenvolvedor trabalhe nas marcações HTML, JavaScript e CSS. Você pode monitorar as marcações em tempo real, destacá-las e removê-las também.

Validador HTML

Enquanto você valida a fonte da página, os bugs e erros são relatados. E se você não conseguir descobrir o que está errado, a ferramenta fornece algumas sugestões.

Validator.w3.org

Você deve fazer o upload do arquivo que deseja validar. O validador mostrará os resultados em diferentes formatos, como:

com recomendações
como um esboço

jigsaw.w3.org

A ferramenta verifica sua marcação em busca de possíveis erros e bugs. Você pode definir vários perfis CSS, escolher um determinado meio para a folha de estilo e controlar as informações no relatório.

relaxado.vse.cz

Essa ferramenta não usa as regras do W3C para validação, mas depende dos protocolos personalizados integrados. Você pode escolher a versão do HTML que deseja usar, se deseja ver o código-fonte e muitas outras opções.

3 Não trabalhe com o modo Quirks do navegador

Alguns navegadores da web apresentam um modo peculiar. Nisso, o navegador luta com suas versões anteriores, que geralmente estão cheias de bugs. Embora permita que um site mais antigo seja compatível com os navegadores da web de hoje, torna-se uma tarefa e tanto se você estiver procurando por páginas da web padronizadas. Isso ocorre porque, no modo peculiar, as páginas da Web não são exibidas de maneira padronizada, mas de maneira única.

Por padrão, um navegador da Web alterna para o modo quirks se você não incluir a declaração de tipo de documento ou o DOCTYPE. Portanto, você deve sempre se lembrar de adicionar um DOCTYPE válido no final da página da web.

4 regras práticas de redefinição de CSS

Cada navegador da web tem seus próprios valores padrão para determinados aspectos, como altura e largura da linha. Esses valores padrão geralmente entram em conflito com as regras CSS personalizadas e distorcem a aparência geral das páginas da web.

Para evitar o dilema de personalizar cada regra CSS que você escreve, você pode redefinir tudo isso no início do seu arquivo CSS. Depois de adicionar essas regras à sua folha de estilo, você pode ter certeza de que está trabalhando do mesmo ponto para todos os navegadores.

5 Use Firefox

Geralmente, os desenvolvedores testam as páginas da Web em um único navegador de uma só vez. Em seguida, eles vão para outros navegadores e continuam fazendo as alterações necessárias à medida que vão de um navegador para outro. Essa é uma abordagem ideal em vez de validar um site em todos os navegadores em uma única execução.

Para criar seu site, o Firefox é o navegador preferido, pois facilita a correção de problemas de compatibilidade com outros navegadores. O Firefox vem com uma infinidade de complementos, o que o torna bastante amigável ao desenvolvedor. Se as páginas da Web estiverem limpas no Firefox, você pode ter certeza de que elas funcionarão bem em outros navegadores.

6 Testes

Os navegadores da web de hoje têm peculiaridades de renderização, portanto, torna-se responsabilidade do desenvolvedor testar as marcações em cada um deles. Aqui está uma lista dos principais navegadores da web:

Internet Explorer
Raposa de fogo
Safári
Ópera (44.0.2510.1218)
Microsoft borda
Navegador UC

Como uma abordagem rápida, você pode optar por um serviço de teste online. Existem muitos sites, como o Browsershots, que tiram capturas de tela do seu site e mostram como elas aparecerão em diferentes sistemas operacionais e navegadores da web. Essas capturas de tela são enviadas por e-mail ou simplesmente disponibilizadas para download. Algumas das ferramentas são pagas, mas certamente informam de antemão os problemas de compatibilidade que as páginas da web podem enfrentar.

Os truques de CSS não dão frutos se você não puder testá-los nos principais navegadores da web. Aqui estão algumas ferramentas úteis para autenticar a compatibilidade entre navegadores das marcações HTML e CSS:

Quirkmode

Essa é uma maneira fácil, mas eficaz, de caçar as falhas entre navegadores. Quirksmode interpreta o CSS e exibe todas as preocupações possíveis.

Imagens do navegador

A ferramenta Browsershots tira screenshots das páginas da web e mostra como seu site será exibido em diferentes navegadores e sistemas operacionais.

Testador IE

Este é um aplicativo da web confiável que permite analisar a aparência das páginas da web em diferentes versões do Internet Explorer. A ferramenta testa o modelo em diferentes versões de navegadores e sistemas operacionais e exibe os resultados em uma interface semelhante ao MS Word.

7 Use comentários condicionais

Há momentos em que você tenta o seu melhor nível, mas ainda assim, não consegue obter os resultados desejados em determinados navegadores, especialmente o Internet Explorer. Aqui, você precisa de alguns hacks confiáveis e testados para serem verdadeiros.

Uma alternativa fácil para isso, você pode incluir a marcação somente do IE com comentários. Com este truque simples, você pode apresentar o HTML ou JavaScript adicional apenas para o IE.

8 Tornar o IE6 compatível com o formato PNG

PNG são prodigiosos. Você pode ter mais de 250 graus de transparência em uma imagem. Para criar visuais otimizados para retina, você pode mostrar suas habilidades de design, como adicionar bordas suaves e planos de fundo personalizados.

Mas o Internet Explorer não é capaz de exibir PNGs transparentes de forma eficaz e mostrar caixas sujas onde deveria ser transparente. Com um pouco de otimização, você pode fazer os PNGs funcionarem perfeitamente no IE6. Isso não exigirá que você faça grandes ajustes no CSS.

Você pode usar o IE PNG Fix para o mesmo.

9 Adicionar substitutos

A maioria dos navegadores da web são compatíveis com Flash e JavaScript. É possível usar fallbacks caso o navegador da Web de um visitante não ofereça suporte a esses recursos.

Por exemplo, no caso do Safari no iPhone, os menus de navegação do Flash ficam inúteis, pois o navegador não oferece suporte ao Flash.

Aqui está uma folha de dicas rápida para economizar tempo ao experimentar diferentes arquivos de mídia:

Imagens: com cada tag img, adicione um atributo alt que descreva a imagem.
Filmes em Flash: evite usar o Flash para recursos principais, como navegação.

10 Opte pela codificação manual

Isso pode ser um ponto de discussão entre os web designers. Muitos webmasters hoje em dia usam ferramentas automatizadas para economizar tempo. Eles são úteis especialmente se você não for bem versado em HTML. Porém, é importante observar que essas ferramentas não combinam com a flexibilidade e a elegância de um designer que habilmente codifica manualmente as marcações HTML entre navegadores.

Codificar as marcações HTML, XHTML e CSS manualmente é um longo caminho. Você está no controle total do que está desenvolvendo e sempre ajusta o programa de acordo com as necessidades e preferências.

Se você acha que a codificação manual é complicada, você pode usar um editor de página da Web baseado em texto. Existem muitas dessas ferramentas disponíveis na internet. Você pode experimentar qualquer um dos seguintes:

Editor CK
Xícara de café
Atom Sublime Texto
coda

Empacotando

Aqui está uma lista de verificação rápida que você pode considerar depois de ter feito a codificação de um site cross-browser:

Cada navegador da web tem um curso de ação individual. Com a codificação HTML em documentos CSS, você deve marcar as páginas da Web de forma que apareçam limpas em todos os navegadores.
Para manter seu site livre de bugs e erros, livre-se dos códigos XHTML, HTML ou CSS inválidos que podem ser destacados pelas ferramentas mencionadas acima.
Fique de olho nos navegadores que trazem o tráfego máximo para o seu site.
Realize uma verificação fundamental em seu site para medir a eficácia nos navegadores.
Explore o modelo de caixa CSS para saber mais sobre os formatos cross-browser.
Use habilmente os planos de sombreamento e matizes de estilo de texto.
Lembre-se de estabelecer melhorias de conteúdo, arranjo e espaço.

Gastar algum tempo extra para fazer com que as páginas da Web funcionem perfeitamente no maior número possível de navegadores sempre compensa. Você não apenas garantirá que o site seja acessível ao público máximo, mas também manterá os visitantes satisfeitos, o que é importante.