Cross browser compatibility

O que é a compatibilidade entre browsers?

A compatibilidade entre navegadores significa até que ponto os sites, lojas online ou outras aplicações funcionam na World Wide Web (www) em vários navegadores. Os navegadores Web como o Google Chrome, Microsoft Edge, Mozilla Firefox e Safari são os navegadores modernos deste período. Os navegadores Web como o Microsoft Internet Explorer e o Netscape são vistos como navegadores mais antigos e não suportam todas as funções que os navegadores modernos oferecem.

Quando um site tem uma determinada funcionalidade que não é possível ou deveria ser desenvolvida de forma diferente noutros browsers (mais antigos), ou está a ser programado de uma forma diferente ou com uma solução alternativa, então este é um exemplo de manutenção da compatibilidade entre navegadores. Abaixo estão dois exemplos onde a compatibilidade entre browsers foi mantida, quer desenvolvendo de uma forma diferente ou com alternativas.

Exemplos de correção de compatibilidade entre browsers

Abaixo mostraremos alguns exemplos que podem ocorrer durante o desenvolvimento de websites e lojas online.

As imagens WebP não são suportadas pelo Microsoft Internet Explorer

Este site utiliza imagens com tipo de ficheiro WebP. Estas imagens são muito mais rápidas de descarregar em comparação com imagens comuns, como imagens JPEG ou PNG. Isto é óptimo, mas o Microsoft Internet Explorer (um browser antigo) não reconhece este tipo de ficheiro como uma imagem que pode ser desenhada, pelo que não é possível fazer nada com ele. A razão para isto é que o WebP é um tipo de ficheiro que foi introduzido pela Google em 2010 e ainda não era utilizado por todos os outros navegadores da Web, porque tinha de provar ser um sucesso antes de estarem dispostos a utilizar tal produto .

Este site oferece vários tipos de ficheiros de imagem, para que o navegador da Web possa escolher qual o tipo de ficheiro que pretende utilizar. Isto irá garantir que, se um navegador da Web não suportar WebP, escolherá o tipo de ficheiro JPEG ou PNG. As pessoas que ainda utilizam browsers que não suportam WebP não conseguem tirar partido do benefício do tamanho reduzido do ficheiro de imagem que as imagens WebP oferecem, o que tornaria os sites mais rápidos, mas felizmente ainda conseguem ver as imagens JPEG ou PNG.

Desde 2020 que foi lançado um novo tipo de ficheiro para imagens: o AVIF. Imagens deste tipo são ainda mais pequenas em tamanho de ficheiro e, portanto, mais rápidas de descarregar em comparação com o tipo de ficheiro WebP. As imagens WebP são, em média, 30% mais pequenas em tamanho de ficheiro do que as imagens JPEG, enquanto as imagens AVIF são, em média, 50% mais pequenas em tamanho de ficheiro do que as imagens JPEG.

Fonte: https://www.ctrl.blog/entry/webp-avif-comparison.html

O gradiente do texto não é possível no Microsoft Internet Explorer

Como já deve ter percebido, o Microsoft Internet Explorer está hoje a levar com toda a culpa. No Google Chrome é possível aplicar um gradiente aos textos. Infelizmente, tal não é possível no Microsoft Internet Explorer, uma vez que esta é uma funcionalidade que foi introduzida após o período em que o Microsoft Internet Explorer ainda estava em desenvolvimento; nenhum desenvolvimento adicional está a ser feito neste navegador da web, pelo que esta funcionalidade está em falta.

Felizmente, é possível verificar se um navegador web suporta ou não este gradiente. Se um navegador Web não suportar esta opção, será utilizada uma cor sólida e não haverá qualquer tentativa de aplicar um gradiente ao texto em navegadores que não suportem esta opção. No entanto, quando isto é tentado, o que acontece é que o gradiente é aplicado ao fundo do texto em vez de ao texto (o que fica mal).

Mais trabalho de programação enquanto pesquisa nas listas

Imagine que este site precisa de procurar todas as imagens na página inicial. De seguida, o site precisa de verificar quais as imagens que estão visíveis e quais as que ainda não estão visíveis no seu ecrã. Para tal, o site precisa de percorrer uma lista. É fácil de programar para os browsers modernos. No entanto, quando se lida com navegadores mais antigos, o processo torna-se muito mais longo (ver comparação abaixo).

var imagens = document.getElementsByTagName('img');
imagens.forEach(function(imagem) {
  // .....
});

var imagens = document.getElementsByTagName('img');
var quantidadeDeImagens = imagens.length;
var iImagem, imagem;
for(iImagem = 0; iImagem < quantidadeDeImagens; iImagem++) {
  imagem = imagens.item(iImagem);
  // .....
}

Esta é uma grande diferença, uma vez que este tipo de código é utilizado com bastante frequência por sites e lojas online. Isto significa que não é lógico utilizar o primeiro exemplo, porque não funciona em browsers mais antigos, a não ser que não haja necessidade de suportar a utilização deste browser.

Como verificamos se os nossos sites são compatíveis com os navegadores mais antigos e em que navegadores?

Desenvolvemos o seu site ou loja online utilizando o Google Chrome, pois este é o browser mais popular em todo o mundo (66% de quota de mercado no final de 2020). Posteriormente, verificámos o seu site no Microsoft Edge, Mozilla Firefox, Safari e Mobile Safari.

Verificamos o design, o layout dos elementos e o funcionamento do seu website ou loja online, por exemplo, se os formulários de contacto e os menus expansíveis funcionam corretamente.

Desenvolvemos sites e lojas online tendo em mente a compatibilidade entre browsers. Quando adicionamos algo, também pensamos em como isso funcionaria noutros navegadores da web, principalmente aqueles em que encontramos a maior quantidade de bugs relacionados com sites (Safari).