Commento condizionale con CSS personalizzato per IE7

Chi scrive codice per il web si trova con il compito ingrato ma indispensabile di visualizzare quanto creato con diversi browser, per verificare che il comportamento delle pagine sia uniforme.

Internet Explorer, con le sue numerose versioni ancora in uso, è statisticamente il browser con cui abbiamo incontrato il maggior numero di problemi. Esistono modi per fixare i bug presenti nelle versioni obsolete e ne abbiamo anche usati alcuni per preparare le demo di questi post ma... ci siamo proprio stancati di lottare con Internet Explorer 7 e versioni inferiori.

In questa "pillola" vedremo quindi come far apparire un messaggio che avvisa il visitatore, che utilizza una versione di IE inferiore alla 8, che il sito non è ottimizzato per il browser in uso invitandolo nel contempo ad aggiornarsi! Ne trarrà vantaggio in sicurezza il proprio Sistema Operativo.

Cominciamo con il preparare quindi un breve testo ("Pagina non ottimizzata per browser inferiori a Internet Explorer 8") ed un link ad una pagina che si apre in una nuova scheda (target='_blank') con maggiori informazioni tipo questa: ie_67.html

Inseriamo testo e link in un div nel body a cui assegnamo la classe fixed_ie. Il div è invisibile nella pagina grazie a display:none:

<div class='fixed_ie' style="display:none;">
Pagina non ottimizzata per browser inferiori a Internet Explorer 8
<a href='http://www.miosito.ext/ie_67.html' target='_blank'>leggimi</a>
</div>

In head inseriamo un commento condizionale che farà caricare un file css solo se il browser utilizzato è inferiore a IE8:

<!--[if lt IE 8]> 
<link rel="stylesheet" href="http://www.miosito.ext/ie_67.css" type="text/css"/> 
<![endif]-->

Queste le regole di stile che vengono assegnate al div fixed_ie quando il file css è caricato:

.fixed_ie {
display: block !important;
position: fixed;
_position: absolute;
top: 0px;
left: 0px;
width: 120px;
background-color: #111111;
color: white;
font-size: 13px;
padding: 4px;
text-align: center;
font-family: "Trebuchet MS",Trebuchet,sans-serif;
}
.fixed_ie a{
text-decoration:underline;
color: #FFCC33;
}
.fixed_ie a:hover{
text-decoration:none;
color: #C0C0C0;
}

Il div viene reso visibile grazie a display:block e viene posizionato nell'angolo superiore sinistro della finestra del browser (position: fixed).
La riga di codice preceduta da underscore _ viene riconosciuta come tale solo da IE6 (e versioni inferiori): non potendo posizionare il div in modo fisso, poiché tale valore non è supportato da questo browser, abbiamo scelto di posizionarlo in modo assoluto anche se in rete si trovano numerosi hack/fix per superare questo scoglio.

Questo è il risultato finale, che è possibile visualizzare su questo blog accedendo con IE7:

Per approfondire l'argomento:

• Stili personalizzati per Internet Explorer con i commenti condizionali - HTML.it
• Position fixed performante su IE6 - HTML.it