XHTML: Commenti Condizionali
This entry was posted on March 2nd, 2009 and is filed under browser, internet explorer, Mozilla Firefox, XHTML.
I commenti condizionali sono quei commenti utilizzati all’interno del codice per eseguirne porzioni in base al tipo di browser che si sta utilizzando. Questa tecnica è stata introdotta proprio per risolvere uno dei problemi che fin dagli arbori attanaglia tutti coloro che hanno a che fare con il web designing e quindi con il cross-browsing dei siti web.
Sul web si trovano migliaia di tecniche per riconoscere il browser con cui l’utente sta navigando; circa il 70% utilizzano script Javascript e quindi lo rendono inutilizzabile se l’utente naviga con Javascript disabilitato. Altre tecniche sono server-based e quindi è sufficiente far controllare al server il tipo di browser e regolarsi di conseguenza.
La tecnica che mostro oggi invece viene usata direttamente all’interno del codice html e serve per distinguere le due macroaree in cui si dividono in browser:
- Internet Explorer
- Non Internet Explorer
Questa tecnica è utile, ad esempio, per caricare uno stile alternativo nel caso si ha a che fare con Internet Explorer (conosciamo bene i suoi problemi) e quindi ci consente di evitare inutili script aggiuntivi.
Innanzitutto vediamo come è composto un commento condizionale:
<!–[if IE]>….<![endif]–>
La prima parte del commento condizionale ( <!–[if IE]> ) è quella che consente di stabilire quando eseguire il codice compreso tra i tag e quindi di riconoscere il tipo di browser. Bisogna poi inserire al posto dei …. il codice xhtml di cui abbiamo bisogno e, infine, chiudere il commento condizionale ( <![endif]–> ).
Vediamo però nel dettaglio la prima parte del commento condizionale, quella che ci consente di scegliere il tipo di browser. Al suo interno è possibile usare operatori condizionali come =, >=, <=, ecc per raggruppare le diverse versioni di Internet Explorer a cui ci stiamo riferendo. La seguente lista racchiude le possibili combinazioni da poter utilizzare all’interno del commento condizionale:
- <!–[if IE]>….<![endif]–>: verifica se il browser è Internet Explorer, indipendentemente dalla versione.
- <!–[if IE 5]>….<![endif]–>: verifica se il browser è Internet Explorer solo versione 5;
- <!–[if gt IE 5]>….<![endif]–>: verifica se il browser è Internet Explorer, versione superiore alla 5;
- <!–[if gte IE 5]>….<![endif]–>: verifica se il browser è Internet Explorer versione 5 o superiore;
- <!–[if lt IE 6]>….<![endif]–>: verifica se il browser è Internet Explorer versione inferiore alla 6;
- <!–[if lte IE 6]>….<![endif]–>: verifica se il browser è Internet Explorer versione 6 o inferiore;
- <!–[if !IE 5.5]>….<![endif]–>: verifica se il browser è Internet Explorer versione diversa dalla 5.5.
Attraverso di essi quindi possiamo aggiungere porzioni di codice a seconda del browser. Voglio solo aggiungere una nota però sull’ultimo tipo di operatore, il “diverso da IE”. Il suo funzionamento è un pò diverso dagli altri. Potete provare che scrivendo semplicemente <!–[if !IE 5.5]>….<![endif]–> il codice all’interno non funzionerà. Non so dare una spiegazione al motivo però fortunatamente c’è una soluzione semplice e senza perdita di tempo.
Il codice giusto per farlo funzionare è il seguente:
<!–[if !IE 5.5]><!–>….<!–<![endif]–>
E’ sufficiente quindi aggiungere alla fine della prima parte del commento condizionale e prima della chiusura del commento condizionale il codice evidenziato nella riga precendente. Nulla di più semplice. 
Benvenuto! Mi chiamo
May 20, 2009 at 6:01 pm
ciao, ascolta ma se io volessi fare il contrario?
cioè vorrei eseguire script1 nei browser ie;
mentre vorrei eseguire script2 per tutti gli altri…
Con questo metodo che scrivi tu il mio risultato è che su ie viene visualizzato script1, mentre su tutti gli altri viene visualizzato script1+script2
c’è un modo?
ho provato con … <!–
ma non sembra andare…
May 20, 2009 at 6:20 pm
Sui commenti purtroppo non leggo il codice che hai utilizzato quindi non posso aiutarti piu di tanto. Rimandamelo per email cosi vediamo di raggiungere insieme una soluzione!
Ti dò un consiglio però…se si tratta di javascript, è meglio fare questi controlli direttamente dentro il codice js. Mi spiego meglio.. supponiamo tu voglia usare una funzione f_ie() se il browser è IE; mentre se il browser è qualsiasi altro si voglia usare la funzione f_others(). Ti consiglio di risolvere la cosa direttamente a livello di javascript. In pseudo-codice la cosa verrebbe piu o meno implementata cosi:
if( IE )
f_ie();
else
f_others();
Se usi jQuery la cosa si semplifica ancora di più! Se hai bisogno di aiuto mandami una mail con il codice esatto che hai usato cosi vediamo se posso aiutarti di piu! Ciao
September 12, 2009 at 4:51 pm
Ciao, sto cercando un’informazione che non trovo… devo inserire un commento condizionale per caricare un CSS solamente per Firefox 2.0 (il menu del sito è fuori allineamento SOLAMENTE con quella versiona di ff – testato ok su tutte le versioni successive, su explorer dalla 6 in poi, su Opera, su Chrome, su Safari)
sai per caso che codice devo scrivere?
September 12, 2009 at 4:59 pm
Ciao,
mi spiace ma non puoi risolvere con i commenti condizionali. Purtroppo funzionano solo per Internet Explorer e non fanno distinzione degli altri browser. Puoi risolvere la cosa con Javascript. Un esempio, anche se non è per firefox lo trovi a questo link:
http://lastwebdesigner.com/javascript/detect-the-user-browser-with-javascript.html
altrimenti leggerti quest altro articolo:
http://www.quirksmode.org/js/detect.html
Se hai ancora problemi fammi sapere e ti aiuto volentieri.
Ciao
August 3, 2010 at 4:12 pm
davvero utile e un’ottima spiegazione.
grazie davvero!
ciao
August 3, 2010 at 4:31 pm
Grazie a te per il commento!
Mi fa piacere essere stato di aiuto!