In che modo i browser visualizzano le pagine Web e perché non sembrano mai uguali?

Mentre navighi sul Web, non è raro imbattersi in siti che sembrano diversi da un dispositivo all'altro. Forse alcune funzionalità non funzionano affatto.

Spesso, questo non è un problema con il sito web. È il tuo browser. I cinque principali browser desktop utilizzano quattro diversi “motori di rendering” per visualizzare una pagina Web: il nuovo browser Microsoft Edge Microsoft Gets the Edge, 1 miliardo di dispositivi con Windows 10 e altro ... [Tech News Digest] Microsoft Gets the Edge, 1 miliardo di dispositivi con Windows 10 e altro ... [Tech News Digest ] Microsoft ha Edge, Windows 10 è enorme, Secret si chiude, incorpora giochi MS-DOS in tweet, guadagna soldi da Silent Hills e guarda Michael Bay farsi vedere da un regista dilettante. Leggi di più per Windows 10 introdurrà un quinto - e ognuno funziona in modo diverso.

Significa che la tua esperienza sul Web può cambiare a seconda del browser che stai utilizzando e anche della versione di quel browser.

Cos'è un motore di rendering?

Una pagina web non è una singola entità che viene scaricata e visualizzata sullo schermo un pixel alla volta. Invece è essenzialmente una serie di istruzioni scritte in vari tipi di codice: HTML, CSS, JavaScript Che cos'è JavaScript e Internet esiste senza di esso? Che cos'è JavaScript e Internet può esistere senza di esso? JavaScript è una di quelle che molti danno per scontato. Tutti lo usano. Leggi di più, PHP e altri - che dicono al browser cosa fare e dove e come farlo.

Ogni browser utilizza un motore di rendering, a volte indicato anche come motore di layout, per prendere il contenuto e le informazioni sullo stile contenute nel codice e visualizzarlo sullo schermo nella sua forma completamente formattata.

Il problema è che non esiste un singolo motore di rendering che viene utilizzato in ogni browser. E mentre ogni lingua è definita da una specifica dettagliata, il motore può offrire solo un'interpretazione di tale specifica.

Con CSS (il codice che fornisce le informazioni sullo stile CSSmatic: Creazione rapida e pratica di fogli di stile CSS3 tramite più strumenti online CSSmatic: creazione rapida e comoda di fogli di stile CSS3 tramite più strumenti online Ulteriori informazioni) in particolare, nessun motore produrrà esattamente gli stessi risultati. A volte le differenze possono solo ammontare al pixel disallineato dispari qua o là, ma a volte possono essere più radicalmente differenti.

Quali browser utilizzano quali motori

Esistono quattro principali motori di rendering utilizzati dai browser più diffusi.

• WebKit: un motore open source utilizzato da Safari su OS X La guida definitiva alla personalizzazione di Safari su Mac La guida definitiva alla personalizzazione di Safari su Mac Personalizza Safari. Dall'aggiunta di favicon alle tue schede per cambiare il modo in cui appare la modalità Reader, il browser Web di Apple è molto più flessibile di quanto pensi. Ulteriori informazioni e iOS, oltre a molti altri browser su dispositivi mobili, incluso il browser Android nativo;
• Blink: un motore open source basato su WebKit, alimenta Chrome, Opera, Amazon Silk e Android WebView (il browser che si apre all'interno delle app);
• Geco: un motore open source sviluppato da Mozilla Foundation, è utilizzato da Firefox;
• Tridente: un motore proprietario sviluppato da Microsoft e utilizzato in Internet Explorer. Il browser Microsoft Edge utilizzerà una versione più recente denominata EdgeHTML.

Standard Web

Il divario tra i diversi motori di rendering è molto più piccolo di quando Internet Explorer era il browser dominante Internet Explorer ha fatto un grande ritorno nel 2015? Internet Explorer fa un grande ritorno nel 2015? Microsoft non deve più offrire agli utenti Windows UE una scelta di browser. Inoltre, Microsoft sta lavorando su un nuovo browser. Tuttavia, ti mostreremo come installare il tuo browser preferito senza toccare IE. Leggi di più .

Test come acid3 mostrano con quanta accuratezza un browser esegue il rendering di una pagina e la maggior parte dei browser moderni ha un punteggio elevato. Tuttavia, conformarsi agli standard è un compito immensamente complesso.

Le specifiche per HTML, CSS e altri sono enormi. Nuovi elementi vengono aggiunti; quelli più vecchi, non usati o non aggiornati vengono rimossi. Può essere necessario molto tempo prima che i motori di rendering riflettano questi cambiamenti.

Alcuni elementi nelle specifiche HTML5 e CSS non sono ancora supportati da alcun browser mainstream, alcuni solo parzialmente supportati, mentre altri ancora sono supportati da alcuni browser ma non tutti.

Il sito web html5test.com ti consente di testare il tuo browser e la versione specifica che stai utilizzando per vedere quanto supporta sia le funzionalità ufficiali che quelle sperimentali di HTML5. Al momento della stesura di questo articolo, Chrome si classifica come il migliore dei principali browser Quale browser Web è il più sicuro? Quale browser Web è il più sicuro? Quale browser è il più sicuro? Quale dovresti installare per assicurarti che la tua esperienza di navigazione sia sicura? Cosa puoi fare per assicurarti che il tuo browser esistente sia il più sicuro possibile? Ulteriori informazioni, con Internet Explorer (v11) più basso.

Se uno sviluppatore web utilizza una funzionalità supportata in un browser ma non in un altro, il browser non supportato deve stabilirsi su un equivalente simile o ignorare del tutto la funzione (una casella trasparente potrebbe essere resa non trasparente, ad esempio).

Questo rende il lavoro di rendering delle pagine Web molto più complesso di quanto non appaia. Un browser che viene aggiornato più frequentemente è probabilmente più conforme agli standard di uno che non lo è, come evidenziato dai normali aggiornamenti automatici di Chrome rispetto agli aggiornamenti IE molto più sparsi.

E ci sono anche altri fattori in gioco.

• Bug nel motore: Un motore di rendering è un software e tutto il software contiene bug. Sebbene i bug critici vengano individuati e annullati rapidamente, è impossibile garantire che una combinazione specifica di codice in una pagina Web non produca risultati imprevisti durante il rendering
• Bug nella pagina web: I browser hanno un certo livello di tolleranza degli errori integrato, ma questo sarà diverso da un motore all'altro. Una pagina web con errori nel codice può ancora essere riprodotta perfettamente in un browser, ma può essere interrotta in modo orribile in un altro
• Tipi di carattere: Il modo in cui i caratteri tipografici vengono visualizzati non viene gestito dal browser ma dal sistema operativo. Windows e OS X rendono i caratteri in modo diverso Come rendere i font Windows come i font Mac Come rendere i font Windows come i font Mac Eye candy non è un forte di Windows. L'interfaccia utente moderna (aka Metro) ha apportato miglioramenti, ma manca ancora in un'area importante: i caratteri. Ti mostriamo come ottenere splendidi caratteri su Windows. Leggi di più, quindi anche lo stesso carattere nello stesso browser può apparire diverso se visualizzato su piattaforme diverse
• Legacy: I browser adottano spesso nuove funzionalità, in particolare per i CSS, prima che diventino parte delle specifiche ufficiali. Se l'implementazione della funzionalità cambia quando viene adottata, lo sviluppatore del browser deve decidere se adottare la modifica e rischiare di rompere la compatibilità con migliaia di siti Web progettati per la versione precedente oppure ignorare completamente la nuova versione
• Caratteristiche di proprietà: Alcuni browser possono utilizzare tecnologie proprietarie che non sono disponibili altrove. Questo è stato più famoso visto con il framework ActiveX di Microsoft in Internet Explorer, anche se la società non lo utilizzerà nel nuovo browser Microsoft Edge

Incartare

Con così tanti problemi coinvolti, non sorprende che le differenze nel modo in cui i browser gestiscono le pagine web persistano.

La situazione sta migliorando, ma è improbabile che venga risolta interamente. Sarebbe utile se tutti avessero l'ultima versione del browser scelto, ma con Internet Explorer 8 di sei anni che continua a mantenere una quota di mercato del 4,5%, è molto lontano.

Quale browser utilizzi e lo mantieni aggiornato? Hai trovato siti Web che non funzionano nel browser scelto? Fateci sapere nei commenti.

Crediti immagine: Dispositivi via Jeremy Keith, browser non supportato tramite Duncan Hill

Scopri di più su: Google Chrome, Internet Explorer, Safari Browser, Sviluppo Web.