Un po di storia

Il Meta-tag in questione, la cui documentazione è consultabile a questo link, è stato inserito da Microsoft con l’uscita di Internet Explorer 8. Questa versione infatti ha una doppia modalità di rendering. Di default IE8 renderizza le pagine web in conformità con gli standard web. Il meta tag X-UA compatibility in origine era nato per dare la possibilità agli sviluppatori che gestiscono siti web non ancora aderenti agli standard di forzare il motore di rendering alla versione 7 per far si che anche gli utenti con IE8 potessero visualizzare correttamente i siti web in oggetto.

Come utilizzarlo?

Per attivarlo correttamente basta inserirlo tra i tag head immediatamente dopo il title, scegliendo tra uno dei seguenti valori, [IE=5 – IE=7 – IE=8 – IE=edge], l’ultimo dei quali consente di utilizzare l’ultimo standard utilizzato da Internet Explorer 8 o dalle future versioni. Ed ecco il codice in questione:

<meta http-equiv="X-UA-Compatible" content="IE=7" > 

Arriviamo al punto

I signori di Google hanno realizzato un plugin, bassato su sistema webkit, che consente a chi è in possesso di Internet Explorer 6-7-8 di poter sfruttare tramite una piccola installazione il motore di rendering di chrome, trasformando di fatto il proprio dino-browser in qualcosa di migliore! La sintassi del meta-tag è identica al precedente caso analizzato con la differenza che i valori da utilizzare sono i seguenti:

  • chrome = 1 -> Sempre attivo
  • chrome = IE7 -> Attivo per le versioni di IE7 in giù
  • chrome = IE8 -> Attivo per le versioni di IE8 in giù

L’utente ha già installato Google Chrome Frame

Se Google Chrome Frame è installato, il sistema funzionerà in automatico se e solo se hai inserito tra i tag head il metatag di cui ti accennavo prima:

<meta http-equiv="X-UA-Compatible" content="chrome=1">

L’utente NON ha ancora installato Google Chrome Frame

Se Google Chrome Frame non è installato sul computer dell’utente, è possibile indirizzarlo a una pagina di installazione seguendo pochi e semplici passi illustrati dettagliatamente nella developer guide redatta da Google. Ti posto subito il codice da includere, codice che può essere tranquillamente modificato e personalizzato in base alle tue esigenze.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
<head>
    <title>Test Page</title>
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
</head>
<body>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
    <style>
    /* 
    CSS rules to use for styling the overlay:
      .chromeFrameOverlayContent{}
      .chromeFrameOverlayContent iframe{}
      .chromeFrameOverlayCloseBar{}
      .chromeFrameOverlayUnderlay{}
   */
    </style> 
    <script>
	window.attachEvent("onload", function() {
	    CFInstall.check({
	        mode: "overlay",
	        destination: "http://www.waikiki.com"
	    });
	});
    </script>
</body>
</html>

In conclusione…

Il sistema mette a disposizione alcune classi CSS per customizzare il tutto, mentre all’onload della pagina viene richiamato il metodo check() che, in base hai parametri che gli vengono passati, modifica il suo comportamento. Nell’esempio riportato, il parametro “mode” è impostato su overlay, il valore raccomandato da Google, che mostra l’avviso “Please install Google Chrome Frame” in una modale, che potrà volendo essere chiusa dall’utente per permettergli la normale navigazione con il suo amato IE…il tutto anche se non si dispone di permessi di amministratore sulla macchina in uso! Come vi ho già detto la documentazione per developer la trovate qui mentre per consigli dubbi o perplessità, utilizzate pure i commenti o la fanpage. Buone vancanze a tutti!

Provalo subito

Prova la demo Consulta il codice
  • Questa roba me ne ricorda un’altra: “Chiunque inserisca nelle proprie pagine un’etichetta del tipo ‘questa pagina si consulta meglio con il browser X’ sembra che provi un forte desiderio di tornare a quei terribili giorni, prima del Web, dove si avevano poche possibilità di leggere un documento scritto su un altro computer, da un altro elaboratore testi, o in un’altra rete.” Sir Tim Barners-Lee.
    Insomma se uno vuole usare un browser vecchio perché gli devo far inserire plugin o altro.
    Che poi quel metatag nemmeno viene validato.

    M.

    • A mio parere il discorso credo sia ben diverso.

      Oggi abbiamo a disposizione molti mezzi attraverso cui una persona può fruire del web, nella fattispecie molti browser oggi si contendono il mercato, browser che possono essere definiti moderni o al passo con gli standard web e altri invece meno recenti … ed altri ancora, in particolare Internet Explorer 6 che da anni blocca nel vero senso della parola le reali potenzialità che la comunità dei front-end developer potrebbe esprimere, senza contare le di ore che ogni giorno tutte le aziende di settore impiegano per debuggare il lavoro svolto dagli stessi per garantire a chi naviga il web con questo browser una navigazione accettabile.

      Non credo più ai discorsi incentrati sul fatto che qualcuno, all’alba del 2013, “voglia” ancora usare un browser vecchio, perchè sarebbe come andare contro il principio secondo cui il web è fondato e cioè la sua continua trasformazione in qualcosa di nuovo e di inaspettato.

      Dato che nessuno immagino voglia utilizzare di proposito qualcosa che possa rendere peggiore la propria esperienza sul web, lo faccia invece solo perche non è sufficientemente informato che possa esserci qualcosa di meglio da utilizzare, oppure lo sa ma non ha privilegi di amministratore su quella macchina per installare qualcosa di moderno.

      Dare una scelta a coloro che utilizzano ANCORA IE6 credo che vada prima di tutto a vantaggio loro e poi a vantaggio anche nostro.

      Nell’articolo in questione io affronto sempre tutti gli aspetti e le possibilità che uno script può fornire, è sottinteso però che ognuno può farne l’uso che vuole… io personalmente lo limiterei ai soli utilizzato di di IE6.

      Marco, detto ciò ti ringrazio per aver commentato; ogni intervento per me è sinonimo di confronto e di dialogo. La condivisione reciproca di conoscenza è alla base del web e può solo far bene.

      buona serata!

      • Emanuela Pitassi

        Ottimo articolo, complimenti.
        Purtroppo il discorso è molto articolato.
        Sono assolutamente d’accordo sia come front-end developer, che come utente finale: non si può bloccare a priori la visualizzazione di un sito innovativo ad utenti che loro malgrado (il 90% dei casi) utilizzano ancora IE 6 e 7. Ricordiamoci che ci sono amministrazioni pubbliche che continuano ad investire il loro denaro in macchine con Win XP, applicativi Office e IE datati. Tutto perché in Italia manca la cultura dell’open source in moltissime realtà della PA.

        Poi certo, si dovrebbe cercare di creare pagine interessanti, innovative, con contenuti di qualità, e che si ‘renderizzano elegantemente’ (un po’ come la linearizzazione elegante delle tabelle prevista dalle care vecchie WCAG).

        Sono solo perplessa dalle modalità di sviluppo (e mi ci metto dentro anche io) che fanno sempre di più utilizzo massiccio di plugin jquery. Con notevoli problematiche poi nella gestione ‘personalizzata’ di alcune funzionalità, nella correzione di piccoli bug (ok, la buona prassi dovrebbe essere quella di segnalare agli sviluppatori tali bug….ma le scadenze sono tipicamente per ‘ieri’), e nel prestare attenzione alla presenza di librerie varie, che devono convivere tra loro, molto allegramente.

        Cmq, ottimo sito. Ti seguirò su Twitter 😉

        • Stefano Vollono

          Ciao Emanuela, si le pubbliche amministrazioni sono un problema enorme sotto questo punto di vista. Tantissimi pc bloccati su IE6 senza la possibilità di aggiornare o scaricare altri browser. L’intento di google era un po quello di aggirare questo problema. Bisognerebbe sensibilizzare le aziende pubbliche ma anche quelle private all’aggiornamento costante dei programmi, ma so che questa è una cosa quasi irrealizzabile. La loror attenzione è sicuramente rivolta a problemi ben piu gravi da risolvere che aggiornare un browser o un OS. Grazie per il tuo intervento e per i complimenti!

  • Riccardo

    Ciao, articolo molto interessante, ne approfitto per porti un quesito.
    Sto realizzando un sito con Edge Animate (adobe) e facendo un pò di test con lo script che hai postato notavo che sul pc dove sviluppo che ha IE 9 senza “Google Chrome Frame” mi appare la finestrella “Please install Google Chrome Frame”.

    Ma visto che IE9 gestisce le animazioni di Edge Animate (html5), per un utente che si collega ogni volta al sito con una situazione come la mia, gli darebbe fastidio vedrere apparire ogni volta tale avviso TENENDO CONTO CHE NON GLI SERVE perchè il sito lo vede lo stesso… arrivo quindi al punto:

    E’ possibile far apparire l’avviso solo a chi ha IE8 e inferiori ed è sprovvisto di “Google Chrome Frame” ? …perché solo in questo caso NON vede niente..

    Ciao!

    • Ciao Riccardo!

      Se ho capito bene, basterebbe semplicemente che tu invece di scrivere cosi come credo che tu abbia scritto:

      <meta http-equiv="X-UA-Compatible" content="chrome=1"/>
      

      scrivessi cosi:

      <meta http-equiv="X-UA-Compatible" content="chrome = IE8"/>
      

      fammi sapere se ho centrato il problema ma soprattutto se hai risolto.

      • Riccardo

        Innanzi tutto grazie per la rapida risposta.
        Come tag ho scritto questo:

        Dovrei aver “risolto” con il javascript, guardo il tipo di browser e se IE é minore di 9, in tal caso faccio aprire nella pagina la finestrella di “Goggle crome” negli altri casi non succede niente perché la pagina viene vusualizzata correttamente.

        Quello che “rompe” è che di utenti con IE8 (windows xp) ce ne sono ancora parecchi e far apparire la patacca di google crome non è il massimo…

        Ciao

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github