I Commenti Condizionali (CC) servono a stabilire la versione di Internet Explorer (IE) usata dall'utente e a dare a questo browser del codice che solo lui sarà in grado di interpretare. La funzione dei CC è simile a quella degli script lato client/server usati per individuare il tipo di browser e la sua versione, ma il loro impiego è notevolmente più semplice e meno dispendioso. I CC sono stati resi disponibili da IE 5 in poi, ma il loro uso è andato crescendo solo negli ultimi anni. I benefici maggiori dei CC rispetto alle tecniche di rilevamento tradizionali si concretizzano in un risparmio di banda ed in un minore impiego di risorse per il computer dell'utente.
Tipi di commenti condizionali
Come si evince dal loro nome, i CC sono dei particolari tipi di commenti HTML. La seguente tabella offre uno sguardo d'insieme sui tipi di CC:
| Tipo di commento | Sintassi |
|---|---|
| commento HTML standard | <!--contenuto del commento--> |
| CC nascosto | <!--[if espressione]>codice HTML<![endif]--> |
| CC rivelato | <![if espressione]>codice HTML<![endif]> |
Nel caso del CC nascosto notiamo subito la perfetta somiglianza con un commento HTML standard:
tutto quello che si trova al suo interno verrà interpretato dai browser diversi da IE e dal validatore W3C
come un normale contenuto di un commento (e quindi ignorato). Viceversa, nel caso del CC rivelato , mancando i
trattini (--) del commento HTML standard, si potranno avere dei risultati imprevisti negli altri browser e, cosa
ancor peggiore, la nostra pagina non verrà validata. Va da sé che per evitare ogni problema dobbiamo
giocoforza usare un CC nascosto. Una cosa da tenere subito a mente è che i CC sono
sensibili agli spazi. Quindi <!--[if espressione]> è diverso da
<!--[ if espressione]>. Nel secondo caso IE non interpreterà il codice all'interno
del CC. Altre volte si potrà avere un'errata visualizzazione della pagina.
Sintassi dei Commenti Condizionali
Come avrete notato, i CC sono dei costrutti ipotetici (if-clause) il cui risultato è un valore booleano (true o false). IE legge il CC e, se la condizione è vera, interpreta ed applica il codice HTML contenuto nel CC. Di seguito riportiamo una tabella degli elementi sintattici contenuti in un CC:
| Elemento | Descrizione |
|---|---|
| IE | È la stringa che identifica Internet Explorer. |
| numero | È un numero intero o a virgola mobile che indica la versione del browser. La virgola è scritta con la notazione puntata. |
| ! | È l'operatore NOT. Viene posto immediatamente prima della stringa IE (senza spazio) ed inverte il valore booleano dell'operando. |
| lt | È l'operatore "minore di" (less-than). Viene posto prima della stringa IE, separato da uno spazio. |
| gt | È l'operatore "maggiore di" (greater-than). Viene posto prima della stringa IE, separato da uno spazio. |
| lte | È l'operatore "minore o uguale a" (less-than or equal). Viene posto prima della stringa IE, separato da uno spazio. |
| gte | È l'operatore "maggiore o uguale a" (greater-than or equal). Viene posto prima della stringa IE, separato da uno spazio. |
Diamo ora alcuni esempi di CC:
<!--[if IE 5]>codice HTML<![endif]-->Codice interpretato solo dalle versioni di IE 5 (5.0, 5.5, 5SP1, ecc.).
<!--[if !IE 7]>codice HTML<![endif]-->Codice interpretato solo dalle versioni di IE diverse dalla 7 (6, 5, ecc.).
<!--[if gt IE 5.5]>codice HTML<![endif]-->Codice interpretato solo dalle versioni di IE superiori alla 5.5 (6, 7).
<!--[if lt IE 6]>codice HTML<![endif]-->Codice interpretato solo dalle versioni di IE inferiori alla 6 (5.0, 5.5, 5SP1, ecc.).
<!--[if gte IE 5]>codice HTML<![endif]-->Codice interpretato solo dalle versioni superiori o uguali ad IE 5 (5.0, 5.5, 6, 7).
<!--[if lte IE 6]>codice HTML<![endif]-->Codice interpretato solo dalle versioni inferiori o uguali ad IE 6 (6, 5.0, 5.5, 5SP1, ecc.).
<!--[if IE]>codice HTML<![endif]-->Codice interpretato da tutte le versioni di IE.
Notate la spaziatura nelle espressioni: deve essere rispettata alla lettera se vogliamo che il CC funzioni.
Uso dei Commenti Condizionali
L'uso più frequente dei CC consiste nel dare solo ad IE delle particolari informazioni di stile. Questo può essere fatto in due modi:
- inserendo un collegamento ad un foglio di stile esterno tramite l'elemento
linkinserito in un CC all'interno dell'elementohead - inserendo del codice CSS direttamente nella pagina tramite l'elemento
styleinserito in un CC all'interno dell'elementohead.
Vediamone due esempi:
-
<head> <!--CSS principale--> <!--[if IE]> <link rel="stylesheet" href="ie.css" type="text/css"> <![endif]--> </head> -
<head> <!--CSS principale--> <!--[if IE]> <style type="text/css"> codice CSS </style> <![endif]--> </head>
I CC devono essere sempre posti dopo il foglio di stile principale: solo in questo modo IE potrà applicare le regole CSS volute senza pericolo di sovrascritture o sovrapposizioni.
Ma i CC possono essere inseriti anche in altre parti di un documento HTML, non solo nell'elemento
head. Consideriamo il seguente esempio:
<head>
<!--CSS principale-->
<!--[if IE 5]>
<style type="text/css">
<span class="css">.ehm {
padding: 1em;
border: 1px solid;
margin: 1em 0;
color: #f00;
background: #fff;
}
</style>
<![endif]-->
</head>
<body>
<!--[if IE 5]>
<p class="ehm">
Usi ancora Internet Explorer 5?
Aggiorna il tuo browser!
</p>
<![endif]-->
</body>
In questo caso solo gli utenti di IE 5 vedranno il messaggio che li invita ad aggiornare il loro browser. Abbiamo combinato
la classe .ehm con il paragrafo nascosto in un CC. Come si può notare, il secondo CC si trova all'interno
dell'elemento body ed è perfettamente valido. C'è di più: tramite i CC possiamo inserire
nella pagina anche del contenuto JavaScript tramite l'elemento script, ovviamente inserito in un CC. Ciò
dimostra che la versatilità dei CC non si limita alle sole informazioni di stile.
Il Vettore di Versione
Se apriamo il registro di configurazione di Windows (cliccando su Start, scegliendo Esegui
nel menu contestuale e quindi digitando regedit seguito da OK) e navighiamo fino alla chiave
HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\Version Vector, troveremo il dato xIE seguito
da un valore numerico (su Windows XP Service Pack 2 è 6.0000). Questo è il Vettore di Versione
(Version Vector, o VV),
ossia l'identificativo univoco di ogni versione di IE. Tale valore si rivela decisivo nell'indirizzare un CC
ad una particolare versione di IE. Per esempio, l'espressione <!--[if IE 5.0]> è equivalente
a <!--[if IE 5.0000]>. In altre parole, il VV può anche essere espresso
usando la forma estesa, ossia un intero seguito da quattro cifre decimali. In questo caso, tuttavia, l'espressione
condizionale viene valutata
confrontando ogni singola cifra che compone il VV. Quindi, se il mio scopo è quello di indirizzare il CC alle versioni di
IE presenti su Windows 98 SE e Windows 2000, la forma <!--[if IE 5.0]> è da preferirsi a
<!--[if IE 5.0000]>, in quanto in Windows 2000 IE 5 ha come VV il valore 5.0002. Se uso
la forma estesa, la quarta cifra dopo la virgola non corrisponderà, ed il CC non verrà interpretato da quel browser.
Occorre quindi usare molta cautela nella scelta del VV.