Il cross-browsing: Come non impazzire

Il cross-browsing: Come non impazzire

Data di pubblicazione: 09-05-2013

Abbiamo creato il nostro bel sito, con la sua grafica accurata, i contenuti suddivisi in sezioni, il logo della nostra azienda o del nostro progetto, i pulsanti per la condivisione delle pagine sui social network. Sembra proprio non mancare nulla. Mandiamo online il nostro lavoro, quello sul quale abbiamo lavorato settimane intere, se non mesi...ed ecco che sopraggiunge un problema insapettato. Il sito viene visualizzato in modo non corretto sui diversi browser (i programmi che usiamo per navigare su Internet, come Firefox, Internet Explorer, Chrome e Safari), oppure riusciamo a vederlo bene su un paio e non sugli altri.

Il problema è conosciuto come cross-browsing e si verifica quando un sito ha al suo interno una o più righe di codice che sono indigeste ad alcuni browser. Il software che usiamo per navigare in rete non è altro che un programma che interpreta delle righe di codice, talvolta anche sopperendo agli errori del webmaster. Tuttavia, capita di frequente che un errore o l'intera sintassi del sito vengano interpretati in modo differente dai vari browser. E anche quando il sito è validato W3C, ossia senza errori di sintassi, possono verificarsi interpretazioni di codice diverse da parte dei software.

Per evitare la spiacevole situazione, che rischia di tagliare fuori una buona fetta di pubblico (il che si traduce in automatico nella perdita di visite e di possibili introiti), bisogna ricorrere a delle soluzioni specifiche. Fermo restando che è buona norma fare numerose prove con il sito che si sta costruendo, facendolo girare su tutti i principali browser per rintracciare eventuali errori di codice o di visualizzazione (a tal proposito, esistono diversi servizi web che permettono di testare il sito contemporaneamente su decine di browser), si può ricorrere ad alcune tecniche utili per risolvere questo fastidioso problema.

 

L'utilizzo di Javascript fogli di stile ad hoc

Una di queste consiste nell'utilizzare l'operatore "in" di Javascript, molto utile per gestire le proprietà supportate dagli elementi HTML. Non va dimenticato, infatti, che oggi i linguaggi di programmazione più usati sul Web sono quelli in HTML5 e CSS3: quindi, per risolvere qualsiasi problema di visualizzazione e di compatibilità con i browser, è necessario conoscere a fondo questi linguaggi.

Un'altra tecnica molto utilizzata è quella del cosiddetto CSS Reset: essa consiste nell'usare una serie di istruzioni di codice CSS per resettare le impostazioni predefinite dei browser. Spesso, infatti, per cercare di evitare il problema di compatibilità dei browser, alcuni webmaster inseriscono una regola all'inizio del foglio di stile che va ad annullare i valori attribuiti in default dai browser. Una soluzione semplice, che tuttavia viene sconsigliata da molti webdesigner perché si rischia di andare incontro ad intoppi nella visualizzazione delle pagine.

Per questo motivo, gli stessi webdesigner hanno ideato dei fogli di stile per resettare queste impostazioni: tra quelli più noti, si possono ricordare Mayerweb Reset (uno dei più utilizzati) YUI 3 CSS Reset, MaxDesign CSS Reset, HTML5 Reset Stylesheet (pensato soprattutto per i siti in HTML5) e CSS mini-reset (che è una specie di software in miniatura in grado di resettare solo gli elementi più importanti e comuni delle pagine di un sito).

Qualora queste soluzioni non dovessero funzionare o se siete a completamente a digiuno di nozioni sui linguaggi sopra indicati, è sempre consigliabile affidarsi ad un'agenzia esterna specializzata in webdesign.