Internet Explorer è notoriamente la fonte di moltissimi problemi per gli webmaster. La ragione risiede nel fatto che interpreta i tag in modo diverso dagli altri browser più comuni come Firefox e Chrome. Sembra che con IE 10 anche questo browser sarà finalmente compatibile con HTML5 e CSS3 ma per adesso tale versione è disponibile solo sulla Beta di Windows 8.
In taluni blog vengono usati dei tag condizionali per mostrare un particolare messaggio solo ai visitatori che aprono il sito con una qualsiasi versione di Internet Explorer. La regola generale per mostrare un contenuto solo con Internet Explorer è la seguente
<!--[if IE]>codice da mostrare se si usa IE<![endif]-->
Dove c'è un commento condizionale prima del codice e il commento condizionale di chiusura alla fine del codice da eseguire. Si possono anche utilizzare dei tag specifici per le singole versioni di Internet Explorer. Cambierà solo il commento condizionale iniziale in questo modo
- <!--[if IE]> : tutte le versioni di Internet Explorer
- <!--[if IE 7]> : la versione 7 di Internet Explorer
- <!--[if !IE 7]> : tutte le versioni di IE tranne la 7 di Internet Explorer
- <!--[if gt IE 7]> : tutte le versioni superiori alla 7 (esclusa) di Internet Explorer
- <!--[if gte IE 7]> : tutte le versioni superiori alla 7 (inclusa) di Internet Explorer
- <!--[if lt IE 7]> : tutte le versioni inferiori alla 7 (esclusa) di Internet Explorer
- <!—[if lte IE 7]> : tutte le versioni inferiori alla 7 (inclusa) di Internet Explorer
Dove al posto di IE 7 si può mettere anche un'altra versione. Da notare che questi commenti condizionali si possono usare anche per mostrare un widget solo ai visitatori che usano Internet Explorer. Può tornare utile se questo widget fosse funzionante solo con questo browser. Se per esempio si inserisce andando su Layout > Aggiungi un gadget > HTML/Javascript il codice da incollare in Sezioni del sito sarà di questo genere
<!--[if IE]>Codice del widget<![endif]-->
Per mostrare un messaggio in un rettangolo nella parte alta del blog solo agli utenti di Internet Explorer possiamo usare questo codice
<!--[if IE]> <div style="top:0;width:100%; background:#80B821; border: 2px dotted #507400; color:#ffffff; padding:10px; height:70px;position:absolute; z-index:12;"> <div style="width:950px; margin:0px auto; padding:12px; font-size:22px;"> Stai usando Internet Explorer. Questo significa che molti contenuti di questo blog ti appariranno in modo non appropriato. Ti consiglio di passare a browser più efficienti come Firefox o Chrome</div> </div> <style type="text/css"> #header-wrapper {margin-top:90px;} </style> <![endif]-->
Ovviamente il testo del messaggio, le dimensioni, i colori e i bordi possono essere personalizzati a piacere. I meno esperti possono consultare il post sui codici dei colori sullo stile dei bordi. I due tag margin e padding determinano rispettivamente le distanze esterne e interne in senso antiorario nelle quattro direzioni. Il codice va incollato in Modello > Modifica HTML > Procedi subito sopra alla riga </head>. Gli utenti di IE vedranno una cosa del genere
Ho anche postato in rete una Demo di contenuti visibili solo con Internet Explorer. Solo chi usa IE potrà vedere la barra in alto e il widget a destra.
Ciao Ernesto.
RispondiEliminaApprofitto dei tag condiz per chiederti una info un pò fuori tema col post ma non saprei esattamente dove inserirla.
Sai se è possibile inserire un tag condizionale all'interno del post e non nel modello. Questa mia necessità deriva dal fatto che alcune pagine del mio blog non dovrebbero mostrare un determinato elemento (nel mio caso si tratta del post-footer) ma inserendo il tag condizionale nel modello (riferito al link del post) rischio di appesantire troppo il caricamento soprattutto se queste pagine condizionali incomincierebbero a diventare molte e il codice html diverrebbe sempre più lungo :(
Qualche suggerimento?
Che bellezza questo widget, lo installo all'istante! xD
RispondiEliminaGrazie mille ;)
@Auto ...
RispondiEliminaNon credo sia possibile inserire un tag condizionale dentro un post. Non sarebbe più un tag condizionale perché ha bisogno dell'URL per funzionare. Penso però che rallentino di più i javascript. I tag condizionali invece sono solo HTML.
@Nico ...
Originale senza dubbio ;)
rinchiudendo il post in un id e condizionandolo da css?
RispondiElimina@auto ...
RispondiEliminaMa se non metti la condizione nel modello, dove la metti? Non mi viene in mente niente di utile.
Già molto originale. Io ho anche inserito il simbolo di allerta prima della frase e i link alle pagine di firefox e chrome. Ho anche ridotto la misura perchè altrimenti si comprometteva la visualizzazione dei tasti superiori, per chi comunque decide di rimanere con IE :P
RispondiEliminaGuarda: http://playstationgen.blogspot.com/
@Niconico-San
RispondiEliminaSì è molto meno invasivo, si nota appena ;)
Ciao Ernesto, grazie per questa guida mi hai risolto un grande problema. Il mio template usa uno slide centrale che non si visualizza solo con IE 8. Ho bisogno però di ridurre la barretta verde perchè troppo invasiva... e ci sono riuscito. Ma adesso devo fare entrare il testo in un rigo. Non riesco a far partire il testo dall'inizio del box verde fino alla fine del medesimo box. E poi vorrei mettere un tastino per chiudere il riquadro in caso qualcuno decida di navigare ugualmente il sito con IE senza tenere conto dell'avviso. Come risolvo? Ti ringrazio in anticipo.
RispondiElimina@Infoforum03
RispondiEliminaPer far partire il testo dall'inizio diminuisci il valore di padding fino a portarlo a zero, puoi anche scrivere più piccolo mettendo per esempio
font-size:18px;
invece di
font-size:22px;
Il tasto con l'opzione di chiudere richiede invece del javascript collegato all'evento onclick. Non è cosa complessissima ma non me la sento di rimettere mano al post ;)