Como é que navegadores exibem páginas da web, e por que eles não sempre a mesma aparência?

Quando você navega na web, não é raro se deparar com sites que parecem diferente de um dispositivo para outro. Talvez alguns recursos não funcionam em tudo.

Muitas vezes, isto não é um problema com o site. É seu browser. Os cinco principais navegadores de desktop utilizar quatro diferentes "mecanismos de renderização" para exibir uma página da web - o novo navegador de Borda do Microsoft para Windows 10 irá introduzir um quinto - e cada um funciona de maneira diferente.

borda ms

Isso significa que a sua experiência da web pode mudar dependendo de qual navegador você está usando, e até mesmo qual a versão do que o navegador.

O que é um motor de renderização?

A página da web não é uma entidade única, que é baixado e exibidos na tela um pixel de cada vez. Em vez disso, é essencialmente uma série de instruções escritas em vários tipos de código - HTML, CSS javascript, PHP e outras - que dizer ao navegador o que fazer e onde e como fazê-lo.

Cada navegador usa um motor de renderização, por vezes também referido como um mecanismo de layout, para levar o conteúdo e estilo informações contidas no código, e exibi-lo na tela em sua forma totalmente formatado.

Leitura

O problema é que não há um único motor de renderização que é usada em todos os navegadores. E enquanto cada idioma é definido por uma especificação detalhada, o motor só pode oferecer uma interpretação dessa especificação.

Com CSS (o código que fornece a informação denomina), Em particular, nenhum motor irá produzir exatamente os mesmos resultados. Às vezes, as diferenças só podem ascender ao pixel desalinhado estranho aqui ou ali, mas às vezes eles podem ser mais radicalmente diferente.

Quais navegadores Use que os motores

Há quatro principais motores de renderização que os navegadores mais populares usam.

  • WebKit: um motor de código aberto usado por Safari no OS X e iOS, assim como muitos outros navegadores em dispositivos móveis, incluindo o navegador Android nativo;
  • Piscar: um motor de código aberto baseado em WebKit, ele alimenta Chrome, Opera, Amazon Silk e do Android WebView (o navegador que se abre nas aplicações);
  • Gecko: um motor de código aberto desenvolvido pela Fundação Mozilla, é usado pelo Firefox;
  • Tridente: um motor proprietário desenvolvido pela Microsoft e usado no Internet Explorer. O navegador de Borda do Microsoft irá utilizar uma versão mais recente chamado EdgeHTML.

web Standards

O fosso entre os diferentes motores de renderização é muito menor do que era quando Internet Explorer foi o navegador dominante.

Testes como Acid3 mostrar com que precisão um navegador processa uma página, ea maioria dos navegadores modernos pontuação alta. No entanto conformidade com as normas é uma tarefa extremamente complexa.

safari Acid3

As especificações para HTML, CSS e outros são enormes. Novos elementos são acrescentado mais velhos, não utilizados ou obsoletos são removidos. Ele pode levar um longo tempo para os motores de renderização para refletir essas alterações.

Alguns elementos do HTML5 e CSS specs ainda não são suportadas por qualquer navegador mainstream, alguns apenas parcialmente suportado, enquanto outros ainda são suportados por alguns navegadores, mas não todos.

O site html5test.com permite testar seu navegador, ea versão específica que você está correndo, para ver como ele suporta ambos os recursos oficiais e experimentais de HTML5. No momento da escrita, Chrome classifica como o melhor dos principais navegadores, com o Internet Explorer (v11) Classificação menor.

html5test chrome

Se um desenvolvedor web usa um recurso que é suportado em um navegador, mas não em outro, o navegador não suportado ou deve resolver em um valor equivalente ou ignorar o recurso completamente (uma caixa transparente poderia ser processado como não transparente, por exemplo).

Isso torna o trabalho de renderização de páginas web muito mais complexo do que parece. Um navegador que é atualizado com mais frequência é provável que seja mais compatível com os padrões do que um que não é, como é realçado pelas atualizações do Chrome automáticas regulares em comparação com as atualizações do IE muito mais esparsas.

Navegador não suportado

E há outros fatores em jogo, também.

  • Bugs no motor: Um motor de renderização é software, e todo o software contém bugs. Embora bugs críticos serão encontrados e anulou rapidamente, é impossível garantir que uma combinação específica de código em uma página da web não vai produzir resultados inesperados quando renderizado
  • Bugs na página web: Navegadores têm um certo nível de tolerância do erro embutido, mas isso será diferente de um mecanismo para a próxima. Uma página web com erros no código ainda pode tornar perfeitamente em um navegador, mas ser terrivelmente quebrado em outro
  • fontes: A maneira fontes são exibidas não é tratado pelo navegador, mas pelo sistema operacional. Windows e OS X tornam fontes de forma diferente, por isso mesmo o mesmo tipo de letra no mesmo navegador pode parecer diferente quando visto em diferentes plataformas
  • Legado: Navegadores, muitas vezes, adotar novas funcionalidades, especialmente para CSS, antes que se tornem parte da especificação oficial. Se a implementação do recurso muda quando este for aprovado, o desenvolvedor navegador precisa decidir se a adotar a compatibilidade mudança e quebra de risco com milhares de sites projetados para a versão antiga, ou ignorar a nova versão inteiramente
  • recursos proprietários: Alguns navegadores podem usar tecnologias proprietárias que não estão disponíveis em outros lugares. Este foi o mais famosa visto com quadro ActiveX da Microsoft no Internet Explorer, embora a empresa não poderá usá-lo no novo navegador da Microsoft Borda

Embrulhar

Com tantas questões envolvidas, não é nenhuma surpresa que as diferenças na forma como os navegadores lidar com páginas web persistem.

StatCounter-browser_version-ww-mensal-201404-201504-bar

A situação está melhorando, mas é improvável que seja resolvido completamente. Seria bom se todos correram a versão mais recente do seu navegador escolhido, mas com a de seis anos de idade Internet Explorer 8 ainda mantendo uma quota de mercado de 4,5 por cento, isso é um longo caminho.

Qual navegador você usa, e você mantê-lo até à data? Você já encontrou quaisquer sites que não funcionam no seu browser escolhido? Deixe-nos saber nos comentários.

» » Como é que navegadores exibem páginas da web, e por que eles não sempre a mesma aparência?