Mostrare un messaggio non invasivo con IE6

HTML/CSS/Javascript | Programmazione PHP
Attenzione! Questo contenuto è vecchioQuesto articolo risale al 2009, quindi i contenuti e le operazioni qui consigliate potrebbero essere diventate obsolete nel corso del tempo.

La direzione che si sta cercando di seguire, parlando in termini di "standardizzazione" dei formati relativi alle pagine web, è quella di lasciar cadere piano piano l'utilizzo di Internet Explorer 6, che è rinomato per la sua non uniformazione agli standard odierni relativi ai fogli di stile CSS.
Questo fatto implica infatti un notevole impegno di tempo da parte degli sviluppatori web per cercare di "adattare" una pagina web - quindi un layout con un determinato foglio di stile - per il suo funzionamento pseudocorretto anche se viene visualizzata con Internet Explorer 6.

Gli strumenti che gli sviluppatori web hanno a dispozizione per far cessare l'utilizzo di Internet Explorer 6 sono molto pochi, e solo il tempo molto probabilmente consentirà un graduale abbandono di questo datato browser. E' altresì vero comunque che gli stessi sviluppatori web possono dare una mano nella velocizzazione di questo processo. Vediamo come.

Se avete sotto mano Internet Explorer 6, provate a visualizzare l'homepage di questo sito, ovvero mauriziofonte.it. In alto vi verrà mostrato un messaggio non invasivo che vi consiglierà l'aggiornamento del vostro browser. Nel caso specifico, nel messaggio presente in questo sito ho deciso di consigliare Mozilla Firefox, perchè personalmente lo ritengo un ottimo browser. Cliccando sul messaggio, verrete infatti reindirizzati alla pagina di scaricamento di Firefox, ovvero mozilla-europe.org/it/firefox/

Avere un messaggio del genere anche sul vostro sito è molto semplice, e servono pochissimi passaggi per creare questo effetto. Vediamo cosa serve per installarlo, nel dettaglio.

Il codice HTML del messaggio 
<!-- DA PIAZZARE ALL'INIZIO DELLA PAGINA, SOTTO IL TAG <body> -->
<div id="ie6warningHolder">
    <a href="javascript:void(0)" id="ie6warning">
        <span class="text">Sembra che tu stia ancora utilizzando IE6. Passa adesso a Firefox per visualizzare correttamente le tue pagine web preferite!</span>
        <span class="closer" alt="Chiudi Avviso" title="Chiudi Avviso">X</span>
    </a>
</div>
Il foglio di stile per il div del messaggio 
/* DA AGGIUNGERE AL VOSTRO FOGLIO DI STILE */
#ie6warning { padding: 0; margin: 0; font-size: 11px; display: block; width:100%; height: 21px; text-decoration: none; background: #FFFFE1 url(IE6alert.gif) no-repeat 5px center; border-bottom: 1px solid #898679; }
#ie6warning span.text { margin: 3px 0 0 13px; padding:0; display: block; float: left; width: 80%; cursor: pointer; color: #000; font-weight: normal;  }
#ie6warning span.closer { font-size: 12px; font-weight: bold; margin: 4px 5px 0 0; padding: 0; float:right; text-align: right; display: block; width: 5%; cursor:pointer; }
#ie6warning:hover { background-color: #316AC5; }
#ie6warning:hover span.text { color: #FFF; }
#ie6warning:hover span.closer { color: #CCC; }

Il file immagine da me utilizzato che si chiama IE6alert.gif è disponibile per il download qui: IE6alert.gif

Il codice Javascript/Jquery che mostra e nasconde il div 
// DA AGGIUNGERE ALLA VOSTRA LIBRERIA JSCRIPT
$('#ie6warning span.text').click(function() {
	window.open('http://www.mozilla-europe.org/it/firefox/','Firefox');
	$('#ie6warningHolder').slideUp(2000);
});
$('#ie6warning span.closer').click(function() {
	$('#ie6warningHolder').slideUp(2000);
});

Per installarlo sulla vostra pagina, è sufficiente copiare il codice HTML del messaggio nel vostro template, è sufficiente aggiungere il codice CSS del div contenitore #ie6warning all'interno del CSS del vostro sito, e stessa cosa per il codice javascript. Dovrete avere però già abilitata e disponibile la libreria jQuery.

Così facendo, però, il messaggio sarà sempre visibile! Come fare quindi per mostrarlo SOLO nel caso in cui l'utente stia visualizzando la pagina con IE6??
Molto semplice. Basta fare un controllo lato server.
Per il mio caso specifico, mi sono basato su una classe di browser detection molto semplice ed intuitiva.
Una volta installata sul server, basterà inserire un codice php simile a questo all'interno delle routine di calcolo delle pagine: 
$br = new Browser;
if ( $br -> Name == 'MSIE' && ($br -> Version <= 6) ) {
	$messaggio_IE6 = '<div id="ie6warningHolder"><a href="javascript:void(0)" id="ie6warning"><span class="text">Sembra che tu stia ancora utilizzando IE6. Passa adesso a Firefox per visualizzare correttamente le tue pagine web preferite!</span><span class="closer" alt="Chiudi Avviso" title="Chiudi Avviso">X</span></a></div>';
	echo $messaggio_IE6;
}
Niente di particolarmente difficile. Pochi minuti per avere nel nostro sito un fantastico messaggio assolutamente non invasivo che consiglia l'aggiornamento del browser.
Per qualsiasi dubbio o chiarimento, non esitate a lasciare un commento.