Come inserire i metatag di compatibilità per fare in modo che i blog su Blogger siano visibili correttamente con Internet Explorer e con gli altri browser.
Se siete utenti di Blogger e vi piace modificare il modello per renderlo originale e funzionale vi sarà certamente capitato di fare dei cambiamenti che funzionavano perfettamente con tutti i browser con l'eccezione di Internet Explorer. Questo genera arrabbiature miste a frustrazione considerato che Internet Explorer è comunque tuttora utilizzato da una discreta fetta di navigatori.
Ho già parlato di come si possa intervenire nel modello per avere una corretta visualizzazione anche con IE ma forse è il caso di riprendere il tema anche perché nel frattempo ci sono state delle novità. Diciamo subito che un blog su piattaforma Blogger è compatibile con Internet Explorer 7 o superiori. I problemi arrivano quando si introducono widget di terze parti o delle personalizzazioni che non sono supportate da Internet Explorer. Se voi andate su Modello > Modifica HTML, subito dopo <head>, troverete la riga
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> 1)
In alcuni template scaricati da Internet è possibile che questa riga non ci sia e questo può anche essere uno dei motivi per una cattiva visualizzazione con Internet Explorer
Questi metatag non interferiscono con i contenuti delle pagine ma dicono a IE di fare il rendering della pagina come in Internet Explorer 7. Se un widget o uno script che avete installato richiede però Internet Explorer 8 o superiore ecco che subentrano i ben conosciuti problemi di grafica.
Il nostro obiettivo sarà quello di fare in modo che la compatibilità venga estesa a altri browser di casa Microsoft visto che Internet Explorer supporta diverse modalità di compatibilità. Passo brevemente a elencarle secondo quanto riportato dalla stessa Microsoft:
- "IE=7" fa in modo che la visualizzazione sia quella standard di IE7
- "IE=EmulateIE7" dice a IE7 come eseguire il rendering del contenuto
- "IE=8" supporta gli standard CSS2 e alcuni CSS3
- "IE=EmulateIE8" dice a IE8 come eseguire il rendering del contenuto
- "IE=9" garantisce il supporto a HTML5 e CSS3
- "IE=EmulateIE9" dice a IE9 come eseguire il rendering del contenuto
- "IE=10" garantisce il massimo supporto a HTML5, CSS3 e a altri linguaggi emergenti
- "IE=edge" dice a IE di visualizzare il contenuto nella più alta compatibilità possibile
Nei modelli a Visualizzazione Dinamica nella riga di metatag è presente anche la stringa chrome=1 che, secondo quello che dice lo stesso Google, introduce la compatibilità con Google Chrome Frame. Gli utenti che hanno questo plugin possono accedere alle tecnologie di Chrome e al motore javascript.
Si possono unificare tutte queste compatibilità in una sola riga in questo modo:
<meta content='IE=IE7; IE=IE8; IE=IE9; IE=IE10; IE=edge; chrome=1' http-equiv='X-UA-Compatible'/>
Dopo aver salvato il template andiamo su Modello > Modifica HTML e cerchiamo la riga 1) che solitamente si trova sotto al tag <head>. Cancelliamola e sostituiamola con la precedente in questo modo
Si salva il modello. Se non riuscite a trovare la riga in questione perché avete un template vecchio o scaricato da internet vi basterà comunque incollare questa nuova riga subito dopo <head>. In questo modo dovreste aver risolto una volta per tutte le difficoltà di visualizzazione con Internet Explorer.
Scusa Ernesto ma sono tardo: nel caso del mio templare che ha la stringa in questo modo:
RispondiEliminameta content='IE=8, IE=9, IE=10' http-equiv='X-UA-Compatible'/
cosa dovrei fare? Aggiungere :'IE=EmulateIE7' subito dopo il simbolo = ?
Grazie per la pazienza.Ciao!
@D.Perina
RispondiEliminaSe il nostro blog viene visualizzato correttamente con IE allora potrebbe essere pleonastico aggiungere questa riga. Però la modifica non danneggia in alcun modo il sito e protegge il layout da possibili malfunzionamenti futuri
@massimiliano
Se hai quella riga significa che probabilmente avevi seguito le istruzioni del post che avevo già dedicato a questo tema e che ho linkato nel'articolo. E' meglio quindi sostituire la riga che hai adesso con questa perché ha anche la compatibilità "IE=edge" che dovrebbe servire anche in caso di aggiornamenti futuri di IE
@#
Grazie Ernesto.Ciao
Eliminasegnalo che con chrome non si vedono più la barra delle pagine in alto e il menu a scomparsa laterale destro dei blog a visualizzazione dinamica oltre allo sfondo scelto per il blog mentre non ci sono problemi con IE e volpe .. pensa te!!
RispondiEliminaho mandato un feedback direttamente a Mountain View ma al momento permane la situazione credo riferibile ad uno degli ultimi aggiornamenti automatici del loro browser
Prendete questo articolo come un tentativo di migliorare la situazione. Nel mio caso per esempio fa in modo da mostrare correttamente anche su IE il Menù multilivello. Poi si sa che ogni modello fa storia a sé.
RispondiEliminaIl caso di Chrome poi è particolare. Secondo me mettono troppa carne al fuoco. Con l'ultimo aggiornamento vogliono passare dal browser webkit a un altro motore proprio quando Firefox ha invece deciso di passare a webkit :P
@#
se interessa a qualche utilizzatore delle visualizzazionji dinamiche ho trovato l'inghippo online che google non vuol risolvere ma che con un semplice passaggio si può correggere in pratica ossessionati dal caricamento pagine non hanno pensato che un blog che usa queste dinamiche man mano che diventa grande rallenta il caricamento e allora troncano tralasciando parti importanti del layout a scapito del visitatore e sembra che siamo stati in tantissimi a segnalare la cosa
RispondiEliminaorbene se posso e Ernesto acconsente
in modifica HTML scendete in fondo e sotto alla riga che inizia con blogger.ui
in luogo di 0 (zero) mettete 500 (cinguecento) in pratica mezzo secondo in più per caricare e tutto funziona di nuovo .. ovviamente salvare il modello prima di uscire
ripeto solo un 50 davanti allo 0 e il gioco è fatto
vedi tu Ernesto se pubblicare o meno questo commento
Stavo per pubblicare un post in merito. Mi hai preceduto :) @#
EliminaPurtroppo anche con quest'ultima modifica i problemi con le vecchie versioni di IE restano.
RispondiEliminaCiao Parsi. :)
Intendi con IE6 o precedenti? Perché con IE7 e successive si doveva risolvere qualcosa :P
Elimina@#
Anche con IE 7 ci sono ancora problemi di visualizzazione e compatibilità di alcuni widget. Non ne parliamo proprio con IE 6. :)
EliminaVa beh ma IE7 si spera che non lo usi più nessuno! Anche Youtube ha cessato il supporto per quel browser :P
Elimina@#
Mi auguro che più nessuno adotti alcuna versione di IE. :)
EliminaCiao Ernesto,
RispondiEliminanon c'è una stringa di codice che oltre a Explorer e Chrome comprenda anche Firefox?
Grazie
Ti spiego il problema: è su un blog hostato su Wordpress, dove ci sono due post che hanno ricevuto molti commenti (quindi la lunghezza della pagina deve essere maggiore). In questi post succede che - solo su Firefox - un pezzo di sfondo alla fine viene a mancare. Per sfondo non intendo lo sfondo esterno, ma solo lo sfondo subito dietro i post: quindi rimane uno spazio tra lo sfondo dietro i post e il footer. Con Chrome ed Explorer la cosa non accade, e nemmeno negli altri post.
RispondiEliminaTu sai cosa potrebbe essere e come si potrebbe risolvere?
Perché non conosco il funzionamento di Wordpress, ad esempio non so se nel codice del template viene inserita una stringa di codice che ne definisce la lunghezza, e magari in questi due post che sono particolarmente lunghi, è andata esauita.
L'altra anomalia è che un'altra persona che ha provato a visualizzarlo con Firefox dice che invece lo sfondo appare normalmente. (?)
Grazie
Se ad altri su Firefox appare normalmente allora potrebbe essere un problema del tuo browser. Forse dei cookie incompatibili o cose del genere, penso. Prova a togliere la cache. Fino a poco fa quello che andava bene per Chrome andava bene anche per Firefox visto che erano entrambi browser webkit. Ora sembra che le loro strade si dividano.
EliminaP.S. Beata te che hai problemi come questi :DD
@#
Non è mio il blog, è un blog di scrittura creativa per il quale ho scritto un paio di guest post ;)
EliminaAvevo già provato a cancellare cache, cookies, ecc., ma il problema permane.
Inoltre, anche l'autore del blog ha lo stesso problema, quindi non è solo il mio browser...
Allora sarà un problema relativo al Tema utilizzato nel sito che ha dei bug con Firefox
Elimina@#
Ok, grazie.
RispondiEliminaLa cosa strana, però, è che succede solo nelle due pagine dei post più commentati, e quindi più lunghi.
(Quello utilizzato non è un tema di quelli preconfezionati).
Grazie lo stesso :)
Funziona davvero. Mi sono posta il problema adesso con la barra informativa dei cookie che IE nascondeva. Aggiungendo questo codice al modello si vede perfettamente :-D Di nuovo grazie!
RispondiElimina